/* Explain: App-specific layout utilities for spacing and positioning. */
.site-container {
    width: 100%;
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) {
    .site-container {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .site-container {
        padding-inline: 2rem;
    }
}

.section-block {
    padding-block: 3.25rem;
}

@media (min-width: 768px) {
    .section-block {
        padding-block: 4.75rem;
    }
}

.section-block--alt {
    background: var(--surface-color);
    border-block: 1px solid var(--border-color);
}

.section-block--tight-bottom {
    padding-bottom: 0.75rem;
}

.section-block--flush-bottom {
    padding-bottom: 0;
}

.split {
    display: grid;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .split {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 2.5rem;
    }
}

.stack {
    display: grid;
    gap: 1.25rem;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(var(--scrim-rgb), 0.94) 0%,
        rgba(var(--scrim-rgb), 0.74) 52%,
        rgba(var(--scrim-rgb), 0.42) 100%
    );
}

@media (min-width: 1024px) {
    .hero-scrim {
        background: linear-gradient(
            to left,
            rgba(var(--scrim-rgb), 0.94) 0%,
            rgba(var(--scrim-rgb), 0.72) 58%,
            rgba(var(--scrim-rgb), 0.38) 100%
        );
    }
}

.page-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}