/* Explain: Structural layout utilities for the single-page painter site. */
.section-shell {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
}

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

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

.ivory-section {
    background: var(--light-background);
}

.hero-grid {
    display: grid;
    min-height: calc(100svh - 5rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }
}

.luxury-divider {
    width: min(10rem, 40vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-color), transparent);
}

.masonry-gallery {
    columns: 1;
    column-gap: 1rem;
}

@media (min-width: 640px) {
    .masonry-gallery {
        columns: 2;
    }
}

@media (min-width: 1024px) {
    .masonry-gallery {
        columns: 3;
    }
}

.masonry-gallery > * {
    break-inside: avoid;
    margin-bottom: 1rem;
}