.cover__container { margin-top: 1px; position: relative; min-height: 40rem; } .cover__back { position: absolute; height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position-x: center; background-position-y: center; z-index: 1; } .cover__content { z-index: 10; position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .cover__overlay { position: absolute; width: 100%; height: 100%; position: absolute; z-index: 2; background-color: rgba(14, 14, 14, 0.2); } @keyframes cover_title_in { 0% { left: -10rem; } 100% { left: 0; } } .cover__title-container { position: relative; padding-top: 1rem; padding-bottom: 1rem; animation: cover_title_in 0.5s cubic-bezier(.39,.58,.57,1); background-color: rgba(1, 1, 1, 0.5); } .cover__title { font-weight: bold; color: white; font-size: 3em; margin: 0; margin-bottom: 0; z-index: 2; // position: absolute; display: block; } .cover__backdrop { } .landing__title { font-weight: 2rem; } .accent-separator { width: 100%; height: 0; border-bottom: .3rem solid $accent; } @media (min-width: $lg-breakpoint) { .cover__back { background-position-x: center; background-position-y: -1.5rem; } }