@layer master {
    .templateCover {
        min-height: 100vh;
        .container {
            .media {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                border-radius: 0;
            }
            .inner {
                position: relative;
                grid-column: span 6;
                justify-content: center;
                @media (min-width: 56em) {
                    align-items: flex-start;
                }
                @media (--min-fablet) {
                    align-items: flex-start;
                }
            }
        }
        .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;
                    }
                }
            }
        }

        &.playing {
            video.teaser { display: none; }
            video.teaser + video.full { display: block; position: relative;}
            .playButton {
                opacity: 1;
            }
        }
    }
}