@layer addon {

    .templateCollection.collectionReview {
        &.themeColor1 {
            .block {
                background-color: var(--color-light);
            }
        }
        &.themeColor2 {
            .block {
                background-color: var(--color1);
            }
        }
        &.themeColor3 {
            .block {
                background-color: var(--color-dark);
            }
        }
        .block {
            &:not(.case &) {
                flex-direction: row-reverse;
            }
            gap: var(--gutter);
            @media (max-width: 56em) {
                flex-direction: column;
            }
            @media (--max-fablet) {
                flex-direction: column;
            }
            .media {
                width: 50%;
                position: relative;
                background-color: inherit;
                &:before,
                &:after {
                    content: '';
                    position: absolute;
                    z-index: 8;
                    background-color: inherit;
                    width: 80px;
                    height: 80px;
                    @media (max-width: 56em) {
                        width: 40px;
                        height: 40px;
                    }
                    @media (--max-fablet) {
                        width: 40px;
                        height: 40px;
                    }
                }

                &:before {
                    top: 80px;
                    right: 0px;
                    @media (max-width: 56em) {
                        top: 40px;
                        left:0;
                        right:auto;
                    }
                    @media (--max-fablet) {
                        top: 40px;
                        left:0;
                        right:auto;
                    }
                }
                &:after {
                    top: 0;
                    right: 80px;
                    @media (max-width: 56em) {
                        right: auto;
                        left:40px;
                    }
                    @media (--max-fablet) {
                        right: auto;
                        left:40px;
                    }
                }
                img {
                    height: 100%;
                    aspect-ratio: 105 / 91;
                }
                @media (max-width: 56em) {
                    width: 100%;
                }
                @media (--max-fablet) {
                    width: 100%;
                }
            }
            .inner {
                justify-content: center;
                align-items: center;
                text-align: center;
                width: 50%;
                gap: var(--gutter);
                background-color: var(--color-light);
                .themeColor1 & {
                    background-color: var(--color1);
                }
                .themeColor2 & {
                    background-color: var(--color-light);
                }
                @media (max-width: 56em) {
                    width: 100%;
                }
                @media (--max-fablet) {
                    width: 100%;
                }
                .header {
                    order: 2;
                }
                .content {
                    flex-grow: initial;
                    font-size: calc(var(--m-fontsize) + .25rem);
                    line-height: 1.35;
                    color: var(--color-dark);
                }
                .footer {
                    order: 4;
                    .outline {
                        box-shadow: inset 0 0 0 1px var(--color-dark);
                        &:hover {
                            @media (hover: hover) {
                                box-shadow: inset 0 0 0 1px var(--color-dark);
                            }
                        }
                    }
                }
            }
        }
    }

    .templateFilter.filterReview {
        .block {
            .inner {
                gap: var(--gutter);
                .header {
                    order: 2;
                }
                .content {
                    order: 1;
                }
                .footer {
                    order: 3;
                    .outline {
                        box-shadow: inset 0 0 0 1px var(--color-dark);
                        color: var(--color-dark);
                        &:hover {
                            @media (hover: hover) {
                                box-shadow: inset 0 0 0 1px var(--color-dark);
                                color: var(--color-dark);
                            }
                        }
                    }
                }
            }
        }
    }
}