@layer addon {
    .templateCover {
        min-height: 80vh;
        padding-bottom: calc(var(--section) / 1.5);
        .scrollDown {display: flex;}
        .homepage & {
            min-height: 100vh;
        }
        .media {
            transform: translateX(-50%) translateY(-50%);
            top: 50%;
            left: 50%;
            overflow: hidden;
            transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, border 0.4s ease-in-out;
        }
        &.is-scrolling {
            .media {
                width: calc(100% - var(--gutter));
                border: calc(var(--gutter) / 2);
                border-radius: var(--border-radius);
                @media (max-width: 56em) {
                    width: calc(100% - var(--spacer));
                    border: var(--spacer);
                }
                @media (--max-fablet) {
                    width: calc(100% - var(--spacer));
                    border: var(--spacer);
                }
            }
        }




        .inner {
            gap: calc(var(--gutter) / 2);
            z-index: 2;
            align-items: center;
            justify-content: flex-end;
            padding-bottom: var(--gutter);
            @media (min-width: 56em) {
                grid-column: 3 / span 8;
            }
            @media (--min-fablet) {
                grid-column: 3 / span 8;
            }
            .intro {
                text-align: center;
                .title {color: var(--color-light);}
                .subTitle {
                    color: var(--color-light);
                    font-style: italic;
                    margin-top: 8px;
                    font-size: var(--s-fontsize);
                }
                .content {
                    color: var(--color-light);
                }
                .article & {
                    .title {
                        font-size: var(--l-fontsize);
                        @media (max-width: 56em) {
                            font-size: calc(var(--l-fontsize) - .75rem);
                        }
                        @media (--max-fablet) {
                            font-size: calc(var(--l-fontsize) - .75rem);
                        }
                    }
                }
            }
            .buttons {
                padding-top: var(--padding);
                @media (max-width: 56em) {
                    width: 80%;
                    .button {
                        width: 100%;
                        .text {
                            flex: 1;
                            text-align: center;
                        }
                    }
                }
                @media (--max-fablet) {
                    width: 80%;
                    .button {
                        width: 100%;
                        .text {
                            flex: 1;
                            text-align: center;
                        }
                    }
                }
            }
        }
        .pauseButton {
            -webkit-backdrop-filter: blur(60px);
                    backdrop-filter: blur(60px);
            background: rgba(255, 255, 255, 0.29);
            border-radius: 100%;
            border: 1px solid rgba(255, 255, 255, 0.5);
            width: 40px;
            height: 40px;
            @media (max-width: 56em) {
                width: 32px;
                height: 32px;
            }
            @media (--max-fablet) {
                width: 32px;
                height: 32px;
            }
            .icon {
                width: 24px;
                height: 24px;
                color: var(--color-light);
                @media (max-width: 56em) {
                    width: 16px;
                    height: 16px;
                }
                @media (--max-fablet) {
                    width: 16px;
                    height: 16px;
                }
            }
            .playing & {
                .icon.pause {
                    opacity: 0;
                }
                .icon.play {
                    opacity: 1;
                }
            }
        }
        .scrollDown {
            bottom: calc(var(--padding) / 2);
            flex-direction: column-reverse;
            gap: 0;
            @media (max-width: 56em) {
                display: flex;
            }
            @media (--max-fablet) {
                display: flex;
            }
            span {
                font-size: 0.875rem;
                font-weight: 700;
                font-family: var(--font-basic);    
            }
            .icon {
                width: 20px;
                height: 20px;
            }
        }
    }
}