/* Explain: App-specific layout utilities and section styling */
.container-x {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.section {
    padding-block: 4.5rem;
}

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

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

    .section-tight {
        padding-block: 4.5rem;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 32, 20, 0.95) 0%, rgba(13, 32, 20, 0.82) 45%, rgba(13, 32, 20, 0.38) 100%);
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 32, 20, 0.88) 0%, rgba(13, 32, 20, 0.68) 100%);
}