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

.color-block {
    border-radius: var(--radius-xl);
    background: var(--secondary-color);
    color: var(--eggshell-color);
}

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

@media (min-width: 980px) {
    .split-hero-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}

.paint-divider {
    height: 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--terracotta-color) 0 28%, var(--mustard-color) 28% 56%, var(--sage-color) 56% 76%, var(--secondary-color) 76% 100%);
}

.gallery-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .gallery-bento {
        grid-template-columns: 1.15fr 0.85fr;
    }

    .gallery-bento .gallery-card:first-child {
        grid-row: span 2;
    }
}