@layer addon {

    .templateMedia {
        .media {
            border-radius: 0;
        }
        @media (min-width: 56em) {
            &.mediaLeft {
                .media {
                    grid-column: span 5;
                }
                .inner {
                    grid-column: 7 / span 6;
                }
            }
            &.mediaRight {
                .media {
                    grid-column: 8 / span 5;
                }
                .inner {
                    grid-column: 2 / span 6;
                }
            }
        }
        @media (--min-fablet) {
            &.mediaLeft {
                .media {
                    grid-column: span 5;
                }
                .inner {
                    grid-column: 7 / span 6;
                }
            }
            &.mediaRight {
                .media {
                    grid-column: 8 / span 5;
                }
                .inner {
                    grid-column: 2 / span 6;
                }
            }
        }

        &.themeColor2 {
            &.mediaLeft, &.mediaRight {
                background-color: var(--color-light);
                padding: 0;
                .container {
                    background-color: var(--color2);
                    border-radius: var(--border-radius);
                    padding: calc(var(--section) / 2) 0;
                    @media (max-width: 56em) {
                        padding: var(--padding);
                    }
                    @media (--max-fablet) {
                        padding: var(--padding);
                    }
                }
            }
            @media (min-width: 56em) {
                &.mediaLeft {
                    .media {
                        grid-column: 2 / span 4;
                    }
                    .inner {
                        grid-column: 7 / span 5;
                    }
                }
                &.mediaRight {
                    .media {
                        grid-column: 8 / span 4;
                    }
                    .inner {
                        grid-column: 2 / span 5;
                    }
                }
            }
            @media (--min-fablet) {
                &.mediaLeft {
                    .media {
                        grid-column: 2 / span 4;
                    }
                    .inner {
                        grid-column: 7 / span 5;
                    }
                }
                &.mediaRight {
                    .media {
                        grid-column: 8 / span 4;
                    }
                    .inner {
                        grid-column: 2 / span 5;
                    }
                }
            }
        }

        &.mediaBottom {
            padding-bottom: 0;
            --reveal-distance: 75vh;
            @media (max-width: 56em) {
                --reveal-distance: 50vh;
                .container {
                    row-gap: calc(var(--section) / 2);
                }
            }
            @media (--max-fablet) {
                --reveal-distance: 50vh;
                .container {
                    row-gap: calc(var(--section) / 2);
                }
            }
            .container {
                grid-column: full-start / full-end;
                @media (min-width: 56em) {
                    gap: calc(var(--section) / 2);
                }
                @media (--min-fablet) {
                    gap: calc(var(--section) / 2);
                }
                position: relative;

                .irresistibleText.large {
                    z-index: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items: center;
                    gap: var(--gutter);
                    
                    font-family: var(--font-extra);
                    font-weight: 300;
                    font-size: 10vw;
                    color: rgba(var(--color1rgb), 0.1);
                    line-height: 0.8;
                    pointer-events: none;

                    position: absolute;
                    bottom: var(--section);
                    
                    @media (max-width: 56em) {
                        gap: var(--section);
                    }
                    
                    @media (--max-fablet) {
                        gap: var(--section);
                    }
                }

                .media {
                    position: relative;
                    height: 100vh;
                    grid-column: span 12;
                    border-radius: 1000px 1000px 0 0;
                    img {
                        height: 100%;
                    }
                    .image & {

                        @media (min-width: 56em) {
                            height: 150vh;
                        }

                        @media (--min-fablet) {
                            height: 150vh;
                        }
                        &:before {
                            content: "";
                            position: absolute;
                            opacity: .2;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background-color: var(--color-dark);
                        }
                    }

                    animation-name: coverFlatten;
                    animation-duration: 1ms;
                    animation-timing-function: linear;
                    animation-fill-mode: both;
                    animation-timeline: scroll(root block);
                    animation-range: 0% var(--reveal-distance);
                }

                .inner:has(.irresistibleText) {
                    position: absolute;
                    bottom: var(--gutter);
                    width: 100%;
                    gap: calc(var(--section) / 2);
                    grid-column: span 12;
                    @media (max-width: 56em) {
                        .intro {
                            padding: 0 var(--spacer);
                        }
                    }
                    @media (--max-fablet) {
                        .intro {
                            padding: 0 var(--spacer);
                        }
                    }
                    .intro {
                        @media (min-width: 56em) {
                            width: calc(100% / 12 * 8);
                            margin: 0 auto;
                        }
                        @media (--min-fablet) {
                            width: calc(100% / 12 * 8);
                            margin: 0 auto;
                        }
                        display: flex;
                        flex-direction: column;
                        gap: calc(var(--gutter) / 2);
                        .title, .subTitle {
                            color: var(--color-light);
                        }
                        .title { order: 2 }
                        .subTitle {
                            order: 1;
                            font-weight: 700;
                            font-family: var(--font-sub);
                            font-size: calc(var(--m-fontsize) * 2);
                        }
                    }
                    .irresistibleText {
                        position: relative;
                        bottom: 0;
                    }
                }

                .irresistibleText:not(.large) {
                    position: absolute;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: var(--color-light);
                    font-family: var(--font-extra);
                    font-size: var(--m-fontsize);
                    width: 100%;
                    bottom: var(--gutter);
                    padding: 0 var(--spacer);
                }
        
                .inner {
                    &:not(:has(.irresistibleText)) {
                        @media (max-width: 56em) {
                            margin: 0 var(--spacer);
                        }
                        @media (--max-fablet) {
                            margin: 0 var(--spacer);
                        }
                        @media (min-width: 56em) {
                            .subTitle, .content {
                                width: calc(100% / 12 * 8);
                                margin-left: auto;
                                margin-right: auto;
                            }
                        }
                        @media (--min-fablet) {
                            .subTitle, .content {
                                width: calc(100% / 12 * 8);
                                margin-left: auto;
                                margin-right: auto;
                            }
                        }
                    }
                    .title, .subTitle, .content {
                        color: var(--color1);
                        text-align: center;
                        .themeColor2 & {
                            color: var(--color4);
                        }
                    }
                    .homepage & {
                        .title {
                            font-size: var(--xxl-fontsize);
                            line-height: var(--xxl-lineheight);
                        }   
                    }
                }
            }
            
            &.video {
                .media {
                    cursor: pointer;
                    .pauseButton {
                        bottom: calc(50% - 24px);
                        background-color: transparent;
                        box-shadow: inset 0 0 0 2px var(--color-light);
                        color: var(--color-light);
                        &:hover {
                            @media (hover: hover) {
                                background-color: rgba(var(--color1rgb), 0.5);
                            }
                        }
                    }
                    .playing & {
                        cursor: pointer;
                        &:hover {
                            @media (hover: hover) {
                                cursor: url("/images/cursor-stop.svg") 55 27, pointer;
                            }
                        }
                        .pauseButton {
                            display: none;
                        }
                
                    }
                    &:hover {
                        @media (hover: hover) {
                            cursor: url("/images/cursor-bekijk.svg") 55 32, pointer;
                        }
                    }
                }
            }

        }
    }

        @keyframes coverFlatten {
            to {
                border-radius: 0;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .templateCover .container .media {
                animation: none;
            }
        }
}