@layer addon {
    .templateCollection.collectionReview, .templateFilter.filterReview {
        .block:not(.quote) {
            transition: var(--transition);
            height: 100%;
            .media {
                transition: var(--transition);
                opacity: 0;
                transform:  scale(0.5);
                position: absolute;
                height: 100%;
                justify-content: center;
                align-items: center;
                img {
                    @media (min-width: 56em) {
                        aspect-ratio: 405 / 336;
                    }
                    @media (--min-fablet) {
                        aspect-ratio: 405 / 336;
                    }
                    height: 100%;
                    object-fit: cover;
                    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 316 289' style='enable-background:new 0 0 316 289;' xml:space='preserve'%3E%3Cpath class='st0' d='M1.7,124.1c1.8,8.3,5.3,16.1,10.1,22.7c10.9,14.8,16.2,33.5,15.3,52.4c-1.5,32,16.3,65.4,45.5,75.5 c20.9,7.2,43.7,3.5,65.7,5c25.2,1.7,49.8,10.3,75.1,9.2c40.3-1.8,46.2-24.9,60.4-55.6c11.5-24.8,41.1-59.5,41.9-87.5 c0.9-34.3-38-51.2-57.7-78.1c-9.9-13.4-15.2-30.3-26.1-42.9C217.5,8,195.1,0.9,173.5,0.9s-42.8,6.2-63.6,12.6 c-23.8,7.2-48,14.8-68.8,29.3c-20.8,14.4-37.9,37-40.5,62.9C0,111.8,0.4,118,1.7,124.1L1.7,124.1z'/%3E%3C/svg%3E%0A");
                            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 316 289' style='enable-background:new 0 0 316 289;' xml:space='preserve'%3E%3Cpath class='st0' d='M1.7,124.1c1.8,8.3,5.3,16.1,10.1,22.7c10.9,14.8,16.2,33.5,15.3,52.4c-1.5,32,16.3,65.4,45.5,75.5 c20.9,7.2,43.7,3.5,65.7,5c25.2,1.7,49.8,10.3,75.1,9.2c40.3-1.8,46.2-24.9,60.4-55.6c11.5-24.8,41.1-59.5,41.9-87.5 c0.9-34.3-38-51.2-57.7-78.1c-9.9-13.4-15.2-30.3-26.1-42.9C217.5,8,195.1,0.9,173.5,0.9s-42.8,6.2-63.6,12.6 c-23.8,7.2-48,14.8-68.8,29.3c-20.8,14.4-37.9,37-40.5,62.9C0,111.8,0.4,118,1.7,124.1L1.7,124.1z'/%3E%3C/svg%3E%0A");
                    -webkit-mask-size: auto;
                            mask-size: auto;
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    -webkit-mask-position: center;
                            mask-position: center;
                }
            }
            .inner {
                .tags, .header, .content {
                    display: flex;
                }
                .title {
                    font-size: var(--l-fontsize);
                    line-height: var(--l-lineheight);
                    color: var(--color2);
                }
                .content {
                    color: var(--color-light);
                }

                .tags {
                    .tag {
                        border-color: var(--color3);
                        color: var(--color3);
                    }
                }
            }

            @media (min-width: 56em) {
                &:hover {
                    @media (hover: hover) {
                        background-color: var(--color2);
                        .media {
                            opacity: 1;
                            transform:  scale(0.9);
                            img {
                                transform: unset;
                                transition: unset;
                            }
                        }
                        .inner {
                            .tags, .header, .content {
                                opacity: 0;
                            }
                        }
                    }
                }
            }

            @media (--min-fablet) {
                &:hover {
                    @media (hover: hover) {
                        background-color: var(--color2);
                        .media {
                            opacity: 1;
                            transform:  scale(0.9);
                            img {
                                transform: unset;
                                transition: unset;
                            }
                        }
                        .inner {
                            .tags, .header, .content {
                                opacity: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}