/* Explain: Immersive layout utilities and gallery structure. - */
.texture-section {
    position: relative;
    overflow: hidden;
}

.texture-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(224, 0, 90, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}

.texture-section > * {
    position: relative;
    z-index: 1;
}

.hero-cinema::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 35%;
    pointer-events: none;
    background: linear-gradient(to top, var(--charcoal-color) 0%, transparent 100%);
}

@media (max-width: 767px) {
    .hero-cinema {
        min-height: 90vh;
    }
}