/* Explain: Layout helpers for section spacing and grids */
.section-shell {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
}

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

.hero-height {
    min-height: min(80vh, 800px);
    display: grid;
    align-items: center;
}

.grid-3-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.grid-2-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
}

@media (min-width: 1024px) {
    .grid-2-col.aside-narrow {
        grid-template-columns: 1fr 1.5fr;
    }
    .grid-2-col.aside-wide {
        grid-template-columns: 1.2fr 0.8fr;
    }
}