/* Explain: Layout utilities for containers, sections, and hero backgrounds. */
.container-x {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

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

.section-pad {
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.hero-scrim {
    background: linear-gradient(90deg, rgba(15, 36, 68, 0.95) 0%, rgba(20, 44, 84, 0.88) 48%, rgba(27, 58, 107, 0.42) 100%);
}

.net-hero-scrim {
    background: linear-gradient(110deg, rgba(30, 45, 120, 0.94) 0%, rgba(60, 45, 150, 0.74) 55%, rgba(112, 72, 232, 0.38) 100%);
}

.youthon-hero-scrim {
    background: linear-gradient(115deg, rgba(24, 20, 56, 0.96) 0%, rgba(60, 28, 120, 0.8) 55%, rgba(109, 61, 224, 0.42) 100%);
}