/* Explain: Layout utilities for asymmetric one-page restaurant sections */
.verde-container {
    width: min(100% - 2rem, 1180px);
    margin-inline: auto;
}

.verde-narrow {
    width: min(100% - 2rem, 860px);
    margin-inline: auto;
}

.section-pad {
    padding-block: clamp(4rem, 8vw, 8rem);
}

.asymmetric-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
}

.gallery-mosaic {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(120px, 18vw);
    gap: 0.9rem;
}

.gallery-mosaic > figure:nth-child(1) {
    grid-column: span 6;
    grid-row: span 2;
}

.gallery-mosaic > figure:nth-child(2),
.gallery-mosaic > figure:nth-child(3) {
    grid-column: span 3;
}

.gallery-mosaic > figure:nth-child(4) {
    grid-column: span 6;
}

@media (min-width: 768px) {
    .asymmetric-grid {
        grid-template-columns: 0.86fr 1.14fr;
        align-items: center;
    }

    .gallery-mosaic > figure:nth-child(1) {
        grid-column: span 3;
        grid-row: span 2;
    }

    .gallery-mosaic > figure:nth-child(2) {
        grid-column: span 3;
        grid-row: span 1;
    }

    .gallery-mosaic > figure:nth-child(3),
    .gallery-mosaic > figure:nth-child(4) {
        grid-column: span 3;
        grid-row: span 1;
    }
}

@media (min-width: 1024px) {
    .section-offset {
        transform: translateY(3rem);
    }
}