/* Explain: App-specific layout utilities (add as needed). */
.container-x {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1.35rem;
}

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

.section-pad {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

@media (min-width: 768px) {
    .section-pad {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

/* Full-screen homepage hero */
.hero-full {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--surface-dark);
    min-height: 100vh;
    min-height: 100svh;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(102deg, rgba(6, 6, 6, .92) 0%, rgba(6, 6, 6, .74) 46%, rgba(6, 6, 6, .42) 100%);
}

/* Interior page hero */
.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--surface-dark);
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
}

.page-hero-scrim {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(180deg, rgba(6, 6, 6, .88) 0%, rgba(6, 6, 6, .74) 100%);
}