@layer addon {
    .templateCollection.collectionArticle,
    .templateFilter.filterArticle {
        .block {
            .media {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                border-radius: var(--border-radius);
                &:before {
                    opacity: 0.6;
                    background: var(--color4);
                    content: "";
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    z-index: 1;
                    left: 0;
                    top: 0;
                }
                img {
                    height: 100%;
                    width: 100%;
                }
            }
            .inner {
                z-index: 2;
                aspect-ratio: 1;
                @media (min-width: 56em) {
                    padding: calc(var(--padding) * 2) calc(var(--padding) * 1.5) var(--padding) calc(var(--padding) * 1.5);
                }
                @media (--min-fablet) {
                    padding: calc(var(--padding) * 2) calc(var(--padding) * 1.5) var(--padding) calc(var(--padding) * 1.5);
                }
                
                .header {
                    flex-grow: 1;
                    .title {
                        padding-left: 0;
                        text-indent: 0;
                        color: var(--color-light);
                        font-size: var(--s-fontsize);
                        font-family: var(--font-basic);
                    }
                }
                .content {
                    color: var(--color-light);
                    flex-grow:initial;
                    font-size: var(--xs-fontsize);
                    line-height: var(--xs-lineheight);
                    padding-right: calc(32px + var(--padding));
                    @media (max-width: 56em){
                        font-size: calc(var(--xs-fontsize) - 0.15rem);
                    }
                    @media (--max-fablet){
                        font-size: calc(var(--xs-fontsize) - 0.15rem);
                    }
                }
                .footer {
                    position: absolute;
                    right: var(--padding);
                    bottom: var(--padding);
                    .text {display: none}
                    .icon {
                        color: var(--color-light);
                        border-radius: 100%;
                        width: 32px;
                        height: 32px;
                        display: block;
                        border: 1px solid var(--color-light);
                        padding: 6px;
                        margin: 0;
                        opacity: 1;
                        -webkit-backdrop-filter: blur(60px);
                                backdrop-filter: blur(60px);
                        background: rgba(255, 255, 255, 0.29);
                    }
                }
            }

            &:hover {
                @media (hover: hover) {
                    .footer {
                        .icon {
                            background-color: var(--color-light);
                            color: var(--color-dark);
                        }
                    }
                }
            }
        }
    }
}