.why-us{
    width: min(1200px, 100%);
    padding-inline: clamp(12px, 4vw, 20px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    span{
        font-size: var(--font-size-xxl);
        font-weight: 500;
    }

    .why-us-columns{
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-lg);

        h3{
            font-size: var(--font-size-lg);
            font-weight: 600;
        }

        h4{
            font-size: var(--font-size-sm);
            font-weight: 500;
            line-height: 1.3rem;
        }
    }

    @media (max-width: 499px) {
        .why-us-section{
            display: flex;
            flex-direction: column;
            width: 100%;
            background: white;
            padding: var(--space-lg);
            border-radius: var(--radius-xl);
            height: 450px;
            position: relative;
        }

        .why-us-section img{
            position: absolute;
            height: 100%;
            max-height: 300px;
            object-fit: cover;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    @media (min-width: 500px) and (max-width: 1079px) {
        .why-us-section{
            display: flex;
            flex-direction: column;
            width: 100%;
            background: white;
            padding: var(--space-lg);
            border-radius: var(--radius-xl);
            height: 180px;
            position: relative;
            padding-left: 200px;
        }

        .why-us-section img{
            position: absolute;
            object-fit:fill;
            width: 160px;
            bottom: 0;
            left: 16px;
        }
    }

    @media (min-width: 1080px) {
        .why-us-columns{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
        
        .why-us-section{
            display: flex;
            flex-direction: column;
            width: 100%;
            min-width: 250px;
            background: white;
            padding: var(--space-lg);
            border-radius: var(--radius-xl);
            height: 450px;
            transition: scale 0.2s ease-in;
            position: relative;
            overflow: hidden;
        }

        .why-us-section img{
            position: absolute;
            height: 100%;
            max-height: 300px;
            object-fit: cover;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        .why-us-section:hover{
            scale: 1.02;
        }
    }
}

@media (min-width: 1080px) {
    .why-us{
        width: clamp(1080px, 90%, 1200px);       
    }
}