.heroSpacing { margin: 0; padding: 0; width: 100%; height: 20rem; display: block; background-color: $black-darker; } .hero { margin: 0; padding: 1rem; width: 100%; height: 20rem; display: flex; flex-direction: column; gap: 1rem; position: absolute; top: 3rem; box-sizing: border-box; background-color: $black; overflow: hidden; pointer-events: none; user-select: none; h1 { margin: 0; padding: 0; font-family: $font-header; font-size: 2.5rem; font-weight: 800; font-stretch: ultra-expanded; color: $white; transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); z-index: +2; } p { margin: 0; padding: 0; font-family: $font-body; font-size: 1rem; font-weight: 600; font-stretch: semi-expanded; color: $white; z-index: +2; } img { margin: 0; padding: 0; width: 100%; height: 100%; opacity: 1; filter: blur(2px) brightness(0.7); object-fit: cover; object-position: center; position: absolute; top: 0; left: 0; z-index: +1; } } .hero_scrolled { padding: 0.5rem 1rem; height: 3rem; top: 0; justify-content: center; background-color: $black-darker; border-radius: 0.5rem 0.5rem 0 0; pointer-events: all; h1 { font-size: 1.5rem; } p { display: none; } img { opacity: 0; } }