@layer addon {
    .article {
        .templateCover {
            padding-bottom: 0;
            @media (max-width: 56em) {
                padding-top: calc(var(--section) * 2);
            }
            @media (--max-fablet) {
                padding-top: calc(var(--section) * 2);
            }
        }
        .templateCover .content, .templateMedia.mediaBottom figcaption, .templateBackground .intro {
            -webkit-backdrop-filter: blur(60px);
                    backdrop-filter: blur(60px);
            background: rgba(255, 255, 255, 0.29);
            border-radius: var(--border-radius);
            border: 1px solid rgba(255, 255, 255, 0.50);
            padding: calc(var(--padding) / 2) var(--padding);
            line-height: 1;
            color: var(--color-light);
            font-size: var(--xs-fontsize);
            font-weight: 600;
        }
        .templateContent {
            &.themeColor4 {
                .inner {
                    border-bottom: 1px solid var(--color3);
                    padding-bottom: calc(var(--padding) * 2);
                }
            }
        }
        .templateMedia.mediaBottom {
            img {
                aspect-ratio: 4 / 3;
            }
            .content {
                .intro {
                    font-size: var(--s-fontsize);
                    line-height: var(--s-lineheight);
                    margin-bottom: var(--gutter);
                }
            }
            figcaption {
                position: absolute;
                bottom: 16px;
                margin: 0 16px;
                font-size: var(--xs-fontsize);
                font-weight: 600;
            }
        }
        .templateBackground {
            padding: 0;
            min-height: 75vh;
            .media {
                &:after {
                    display: unset;
                }
            }
            .inner {
                grid-column: 3 / span 8;
                justify-content: flex-end;
                align-items: center;
                margin-bottom: 16px;
                @media (max-width: 56em) {
                    grid-column: auto;
                }
                @media (--max-fablet) {
                    grid-column: auto;
                }
            }
        }

        
    }
    
}