/* ==========================================================================
   cb-dual-images.css — Custom Build: Two-image panel
   Figma: 1440×568, background #E6DFD7, padding 0 60px 80px 60px
   Image area: 1320×488, gap 20px between images
   ========================================================================== */

.cb-dual-images {
    background-color: #E6DFD7; /* Figma: #F0EBDF */
    padding-top: 60px;
    padding-bottom: 80px;
    padding-right: 60px;
    padding-left: 60px;
}

/* Two-image grid — 1320px wide, 488px tall, 20px gap */
.cb-dual-images__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: var(--max-width); /* 1320px */
    margin-inline: auto;
    height: 488px;
}

.cb-dual-images__figure {
    margin: 0;
    overflow: hidden;
    height: 100%;
}

.cb-dual-images__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile — Figma 390px: images stay side-by-side, aspect-ratio 650/488 (~4:3) */
@media (max-width: 639px) {
    .cb-dual-images {
        padding-top: 0;
        padding-bottom: 80px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Keep 2-column side-by-side layout — Figma: flex row with gap-[20px] */
    .cb-dual-images__grid {
        grid-template-columns: 1fr 1fr;
        height: auto;
        gap: 20px;
    }

    /* Switch from fixed height to aspect ratio — Figma: aspect-[650/488] */
    .cb-dual-images__figure {
        height: auto;
        aspect-ratio: 650 / 488;
    }
}