@layer master { .templateCover { min-height: 100vh; .container { .media { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; &:before { content: ""; position: absolute; opacity: .4; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-dark); } } .inner { position: relative; align-items: flex-start; @media (min-width: 56em) { justify-content: center; grid-column: span 6; } @media (--min-fablet) { justify-content: center; grid-column: span 6; } .title, .subTitle, .content { color: var(--color-light); } } } .scrollDown { position: absolute; color: white; bottom: var(--padding); left: 50%; transform: translateX(-50%); z-index: 9; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: calc(var(--gutter) / 2); @media (max-width: 56em) { display: none; } @media (--max-fablet) { display: none; } &:hover { @media (hover: hover) { .icon { animation: scroll-down 1s ease-in-out infinite; } } } } } }