.why-section {
    background: rgba(242, 174, 47, 0.8); /* #F2AE2FCC */
    padding: 70px 0 80px;
    font-family: 'Metropolis', sans-serif;
    overflow-x: clip;
}

.why-title { text-align: center; font-size: 32px; font-weight: 500; margin: 0 0 8px; }
.why-subtitle { text-align: center; font-size: 18px; margin: 0 0 28px; }

.why-items { display: grid; gap: 0; margin: 0 auto; }
.why-item { display: flex; overflow: hidden; }
.why-item.align-right { justify-content: flex-end; }
.why-item.align-left { justify-content: flex-start; }
.why-item img { width: auto; height: 100%; max-width: none; object-fit: cover; }

/* specific heights and overlap behavior */
.why-item:nth-child(1) { height: 320px; }
.why-item:nth-child(2) { height: 217px; width: 696px; overflow: hidden; margin-top: -50px; }
.why-item:nth-child(2) img { width: 100%; height: 100%; }
.why-item:nth-child(3) { height: 133px; }

/* slide-in animations */
.slide-from-left { opacity: 0; transform: translateX(-60px); }
.slide-from-right { opacity: 0; transform: translateX(60px); }
.why-item.animate { opacity: 1; transform: translateX(0); transition: opacity 0.6s ease, transform 0.6s ease; }

@media (max-width: 991.98px) {
    .why-items { gap: 16px; }
    .why-item { height: auto; }
    .why-item img { width: 100%; height: auto; }
    .why-item:nth-child(1) { height: unset; }
    /* image 1 keep full (no crop), proportional */
    .why-item:nth-child(1) img { width: 100%; height: auto; object-fit: contain; }
    .why-item:nth-child(2) { width: 100%; height: 100%; overflow: hidden; margin: 0 auto; }
    .why-item:nth-child(2) img { width: 100%; height: 100%; }
    .why-item:nth-child(3) { height: auto; }
}

@media (max-width: 575.98px) {
    .why-title {
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
    }
}