@layer addon {

    section:not(.templateMore, .nextItem,.collectionArticle) {
        background-color: var(--color1)!important;
        padding: calc(var(--section) / 2) 0;
        .inner {
            @media (min-width: 56em) {
                grid-column: 4 / span 6;
            }
            @media (--min-fablet) {
                grid-column: 4 / span 6;
            }
            .intro {
                text-align: left;
                .title, .subTitle, .content {
                    color: var(--color-dark);
                }
            }
        }

        &.themeColor1:not(.templateMore) + &.themeColor1,
        &.themeColor2 + &.themeColor2,
        &.themeColor2 + &.themeColor1,
        &.themeColor2 + &.themeColor3,
        &.themeColor2 + &.themeColor4,
        &.themeColor3 + &.themeColor1,
        &.themeColor3 + &.themeColor2,
        &.themeColor4 + &.themeColor1 ,
        &.themeColor4 + &.themeColor2 {
            padding-top: 0;
        }

        &.templateContent:not(.articleIntro) {
            .inner {
                .intro {
                    .title {
                        font-size: var(--s-fontsize);
                        line-height: var(--s-lineheight);
                        font-weight: 600;
                    }
                    .content {
                        font-size: var(--fontsize);
                        line-height: var(--lineheight);
                    }
                    .title + .content {
                        margin-top: calc(var(--gutter) / 2);
                    }
                }
            }
        }

        &.templateMedia {
            .container {
                border: 2px solid var(--color-dark);
                padding: calc(var(--section) / 2);
                @media (max-width: 56em) {
                    padding: var(--padding) calc(var(--padding) / 2);
                    .media {
                        max-width: 164px;
                    }
                }
                @media (--max-fablet) {
                    padding: var(--padding) calc(var(--padding) / 2);
                    .media {
                        max-width: 164px;
                    }
                }
                @media (min-width: 56em) {
                    width: 65%;
                    margin: 0 auto;
                    .mediaLeft & {
                        .media {
                            grid-column: span 5;
                        }
                        .inner {
                            grid-column: 6 / span 7;
                        }
                    }
    
                    .mediaRight & {
                        .media {
                            grid-column: 8 / span 5;
                        }
                        .inner {
                            grid-column: span 7;
                        }
                    }
                }
                @media (--min-fablet) {
                    width: 65%;
                    margin: 0 auto;
                    .mediaLeft & {
                        .media {
                            grid-column: span 5;
                        }
                        .inner {
                            grid-column: 6 / span 7;
                        }
                    }
    
                    .mediaRight & {
                        .media {
                            grid-column: 8 / span 5;
                        }
                        .inner {
                            grid-column: span 7;
                        }
                    }
                }
                .intro {
                    display: flex;
                    flex-direction: column-reverse;
                    .title {
                        font-size: var(--m-fontsize);
                        line-height: var(--m-lineheight);
                        font-weight: 400;
                    }
                    .subTitle {
                        font-size: var(--xs-fontsize);
                        line-height: normal;
                    }
                    .title + .subTitle {
                        margin-top: 0;
                        margin-bottom: var(--gutter);
                    }
                }
            }
        }

        &.templateBackground {
            .container {
                position: relative;
            }
            .media {
                @media (min-width: 56em) {
                    grid-column: 3 / span 8;
                }
                @media (--min-fablet) {
                    grid-column: 3 / span 8;
                }
                &:after {
                    display: none;
                }
            }
            &.video {
                .inner {
                    position: absolute;
                    grid-column: unset;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            &.image {
                .media {
                    position: relative;
                    border-radius: var(--border-radius);
                    overflow: hidden;     
                    &:before {
                        display: none;
                    }
                    img {
                        aspect-ratio: 16/9;
                    }               
                }
                .inner {
                    display: none;
                }
            }
        }
    }

    section.templateCover {
        .inner {
            gap: var(--padding);
            .tags {
                @media (max-width: 56em) {
                    flex-direction: column;
                    align-items: center;
                }
                @media (--max-fablet) {
                    flex-direction: column;
                    align-items: center;
                }
                .tag {
                    svg {
                        width: 24px;
                        height: 24px;
                        @media (max-width: 56em) {
                            width: 16px;
                            height: 16px;
                        }
                        @media (--max-fablet) {
                            width: 16px;
                            height: 16px;
                        }
                    }
                }
            }
        }
        &:not(.nextItem) {
            padding-top: calc(var(--section) + var(--header-height));
            .container {
                grid-column: full-start / full-end;
                row-gap: calc(var(--section) / 2);
                .media {
                    position: relative;
                    order: 2;
                    height: 448px;
                    @media (max-width: 56em) {
                        height: 256px;
                    }
                    @media (--max-fablet) {
                        height: 256px;
                    }
                    &:before {
                        display: none;
                    }
                }
                .inner {
                    order: 1;
                    @media (min-width: 56em) {
                        grid-column: 3 / span 8;
                    }
                    @media (--min-fablet) {
                        grid-column: 3 / span 8;
                    }
                    @media (max-width: 56em) {
                        grid-column: 2 / span 10;
                    }
                    @media (--max-fablet) {
                        grid-column: 2 / span 10;
                    }
                    .intro {
                        text-align: center;
                    }
                }
            }
        }
        &.nextItem {
            padding: calc(var(--section) / 2) 0;
            min-height: auto;

            .media {
                &:before {
                    opacity: .5;
                }
            }
            .inner {
                .title {
                    font-size: var(--l-fontsize);
                    line-height: var(--l-lineheight)
                }
                .tags, .info {
                    color: var(--color-light);
                }
            }
        }
    }
}