@layer addon {
    body:not(.article) .templateBackground {
        background-color: initial;
        
        .introTitle {
            grid-column: content-start / content-end;
            display: grid;
            gap: var(--gutter);
            grid-template-columns: repeat(12, 1fr);
            padding-bottom: var(--gutter);
            
            
            .title {
                font-family: var(--font-basic);
                font-weight: 400;
                font-size: var(--xl-fontsize);
                line-height: var(--xl-lineheight);
                -webkit-hyphens: none;
                        hyphens: none;
                em {
                    font-weight: 300;
                    font-family: var(--font-sub);
                }
            }
            
            position: relative;
            @media (max-width: 56em) {
                gap: 0;
                padding-bottom: var(--padding);
            }
            @media (--max-fablet) {
                gap: 0;
                padding-bottom: var(--padding);
            }
            .intro {
                grid-column: span 12;
            }
        }

        .container {
            margin-left: var(--min-gutter);
            margin-right: var(--min-gutter);
            position: relative;
            border-radius: var(--border-radius);
            overflow: hidden;
            @media (max-width: 56em) {
                gap: 0;
                margin-left: initial;
                margin-right: initial;
            }
            @media (--max-fablet) {
                gap: 0;
                margin-left: initial;
                margin-right: initial;
            }
        }

        

        .media {
            &:after {display: none}
            @media (max-width: 56em) {
                order: 2;
                position: relative;
                min-height: 450px;
            }
            @media (--max-fablet) {
                order: 2;
                position: relative;
                min-height: 450px;
            }
        }
        .inner {
            height: 100%;
            background-color: var(--color2);
            padding: calc(var(--padding) * 2.5) var(--gutter);
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
            grid-column: span 5;
            gap: var(--gutter);
            z-index: 1;
            @media (max-width: 56em) {
                grid-column: span 12;
                gap: var(--padding);
                margin-bottom: calc(var(--min-padding) * 2);
                height: auto;
                border-radius: var(--border-radius);
                padding: calc(var(--padding) * 2) var(--padding);
            }
            @media (--max-fablet) {
                grid-column: span 12;
                gap: var(--padding);
                margin-bottom: calc(var(--min-padding) * 2);
                height: auto;
                border-radius: var(--border-radius);
                padding: calc(var(--padding) * 2) var(--padding);
            }
            .subTitle + .content {
                margin-top: var(--gutter);
            }
            .subTitle {
                padding: 0;
                text-indent: 0;
                font-size: var(--m-fontsize);
                line-height: var(--m-lineheight);
            }
            .themeColor1 & {
                background-color: var(--color-light);
            }
            .themeColor2 & {
                background-color: var(--color2);
            }
            .themeColor3 & {
                background-color: var(--color3);
            }
            .themeColor4 & {
                background-color: var(--color1);
            }
        }
    }
}