.hero {
    position: relative;
    padding: clamp(6rem, 14vh, 8.5rem) 0 clamp(3rem, 6vh, 5rem);
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom,
            var(--video-dominant-color, black) 0%,
            var(--video-dominant-color, black) 48%,
            var(--video-dominant-color-transparent, rgba(0, 0, 0, 0.5)) 80%,
            transparent 96%);
    mask-image: linear-gradient(to bottom,
            var(--video-dominant-color, black) 0%,
            var(--video-dominant-color, black) 48%,
            var(--video-dominant-color-transparent, rgba(0, 0, 0, 0.5)) 80%,
            transparent 96%);
}



.hero-prism {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}