@layer addon {

    .templateCover {
        @media (min-width: 56em) {
            padding-bottom: var(--section);
        }
        @media (--min-fablet) {
            padding-bottom: var(--section);
        }

        .media {
            &:before {
                background: var(--gradient-image);
                content: "";
                height: 100%;
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 2;
            }
        }
        
        .inner {
            align-items: center;
            justify-content: flex-end;
            gap: var(--gutter);
            z-index: 9;
            text-align: center;
            @media (min-width: 56em) {
                grid-column: 3 / span 8;
            }
            @media (--min-fablet) {
                grid-column: 3 / span 8;
            }

            .title {
                font-size: var(--xl-fontsize);
                line-height: var(--xl-lineheight);
                background-image: none;
                @media (max-width: 56em) {
                    font-size: var(--l-fontsize);
                    line-height: var(--l-lineheight);
                }
                @media (--max-fablet) {
                    font-size: var(--l-fontsize);
                    line-height: var(--l-lineheight);
                }
            }
            .title, .subTitle, .content {
                color: var(--color-light);                
            }
        }

        .homepage & {
            padding-top: var(--padding);
            min-height: fit-content;

            .logo-cover {
                width: 400px;
                position: absolute;
                z-index: 9;
                pointer-events: none;
                top: 50%;
                transform: translateY(-50%) translateX(-50%);
                left: 50%;
                svg {
                    .gradient {
                        fill: url(#linear-gradient);
                    }
                }
            }

            video.teaser + video.full { display:none }

            dialog {
                max-width: 100%;
                height: 100%;
                padding: 0;
                border-radius: var(--border-radius);
                button {
                    position: absolute;
                    right: var(--gutter);
                    top: var(--gutter);
                    background-color: rgba(var(--color-light-transparency), 0.2);
                    color: var(--color-light);
                    z-index: 999;
                    padding: 12px;
                    border-radius: var(--border-radius);
                    .icon {
                        width: 16px;
                        height: 16px;
                    }
                }
                &::backdrop {
                    -webkit-backdrop-filter: blur(2px);
                            backdrop-filter: blur(2px);
                    background: rgba(0, 57, 131, 0.6);
                }

            }

            &.playing {
                video.teaser {
                    display: block;
                }
                .pauseButton {
                    opacity: 0;
                }
                .logo-cover {
                    opacity: 0;
                }
            }
            .media {
                position: relative;
                border-radius: var(--border-radius);
                overflow: hidden;
                
                img,
                video.teaser {
                    position: relative;
                    overflow: hidden;
                    @media (min-width: 56em) {
                        height: 325px;
                    }
                    @media (--min-fablet) {
                        height: 325px;
                    }
                }
                .pauseButton {
                    right: var(--gutter);
                    bottom: var(--gutter);
                    background-color: transparent;
                    color: var(--color-light);
                    z-index: 9;
                }
                .buttons {
                    position: absolute;
                    width: fit-content;
                    height: fit-content;
                    bottom: calc(var(--padding) / 2);
                    left: calc(var(--padding) / 2);
                    z-index: 9;
                    .playButton {
                        top: auto;
                        left: 0;
                        transform: none;
                        bottom: 0;
                    }
                }
            }
            .inner {
                display: flex;
                grid-column: span 12;
                flex-wrap: wrap;
                width: 100%;
                flex-direction: row;
                justify-content: flex-start;
                gap: var(--gutter);
                text-align: left;
                article {
                    width: calc(33.3333% - 16px);
                    @media (max-width: 56em) {
                        width: 100%;
                        height: auto;
                    }
                    @media (--max-fablet) {
                        width: 100%;
                        height: auto;
                    }
                    .block {
                        min-height: 250px;
                        padding: var(--gutter);
                        .media {
                            &:before {
                                background: var(--gradient-image);
                            }
                        }
                        &:hover {
                            @media (hover: hover) {
                                .media {
                                    img {
                                        transform: scale(1.05);
                                    }
                                }
                            }
                        }
                    }
                    .media {
                        position: absolute;
                        height: 100%;
                        img {
                            height: 100%;
                        }
                    }
                    .inner {
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: flex-end;
                        padding: 0;

                        .title {
                            font-size: var(--s-fontsize);
                            line-height: var(--s-lineheight);
                        }
                    }
                    .block.jobposting {
                        gap: 16px;
                        .topJobPosting {
                            top: 0;
                            left: 0;
                            z-index: 9;
                        }                        
                    }
                }
            }
            
            @media (max-width: 56em) {
                .media {
                    aspect-ratio: 3 / 4;

                    .logo-cover {
                        width: calc(100vw - calc(var(--spacer) * 4));
                    }
                    dialog {
                        /* height: fit-content; */
                        margin: auto var(--spacer);
                    }
                }
            }
            
            @media (--max-fablet) {
                .media {
                    aspect-ratio: 3 / 4;

                    .logo-cover {
                        width: calc(100vw - calc(var(--spacer) * 4));
                    }
                    dialog {
                        /* height: fit-content; */
                        margin: auto var(--spacer);
                    }
                }
            }
        }
    }

    .templateBackground {
        .media {
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            border-radius: 0;
            top: 0;
            &:before {
                background: var(--gradient-image);
                content: "";
                height: 100%;
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 2;
            }
        }
        .inner {
            z-index: 1;
            .intro {
                text-align: center;
                .title, .content {
                    color: #fff;
                }
            }
            .buttons {
                justify-content: center;
            }
        }
        &:hover {
            .inner {
                .buttons {
                    .playButton {
                        opacity: 1;
                    }
                }
            }
        }
        &.playing {
            .media {
                &:before {
                    opacity: 0;
                }
            }
            .inner {
                .intro {
                    opacity: 0;
                    visibility: hidden;
                }
            }
        }
    }

}