/* Explain: Page layout helpers and responsive containers. - */
.page-shell {
    min-height: 100vh;
}

.site-container {
    width: min(100% - 2rem, 1180px);
    margin-inline: auto;
}

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

.section-heading {
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}

.offset-anchor {
    scroll-margin-top: 5.5rem;
}

@media (max-width: 767px) {
    .site-container {
        width: min(100% - 1.25rem, 1180px);
    }

    .section-spacing {
        padding-block: 3.5rem;
    }
}