/* ── Collage ─────────────────────────────────────────────────
   Figma (home): Our Story 1397:12124 / 1397:11826,
   Weddings 1397:12265 / 1397:11970.
   ─────────────────────────────────────────────────────────── */

.collage {
    display: flex;
    gap: 16px;
    height: var(--collage-h, 557px);
}

.collage__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

.collage__big {
    flex: 1;
    min-width: 0;
}

.collage__pair {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

/* Our Story: the pair on the left, taller one on top */
.collage--story .collage__pair {
    order: -1;
    width: 260px;
}

.collage--story .collage__small:first-child {
    flex: 296;
}

.collage--story .collage__small:last-child {
    flex: 244;
}

/* Weddings: the pair on the right, equal heights */
.collage--wedding {
    --collage-h: 511px;
}

.collage--wedding .collage__pair {
    width: 400px;
}

.collage--wedding .collage__small {
    flex: 1;
}


/* Tablet and mobile — 1024px and below */
@media (max-width: 1024px) {
    .collage--story {
        --collage-h: 303px;
        gap: 11px;
    }

    .collage--story .collage__pair {
        gap: 11px;
        width: 51%;
    }

    .collage--story .collage__small:first-child {
        flex: 160;
    }

    .collage--story .collage__small:last-child {
        flex: 132;
    }

    /* Weddings: the big one on top, the pair side by side underneath */
    .collage--wedding {
        flex-direction: column;
        height: auto;
    }

    .collage--wedding .collage__big {
        aspect-ratio: 353 / 198.5;
    }

    .collage--wedding .collage__pair {
        flex-direction: row;
        gap: 14px;
        width: 100%;
    }

    .collage--wedding .collage__small {
        flex: 1;
        min-width: 0;
        aspect-ratio: 1;
    }
}