@layer addon {

    .templateCollection.collectionReview {
        .block {
            background-color: var(--color3);
            padding: calc(var(--padding) * 2);
            gap: calc(var(--padding) * 2);
            .inner {
                padding: 0;
                @media (max-width: 56em) {
                    margin-bottom: var(--padding);
                }
                @media (--max-fablet) {
                    margin-bottom: var(--padding);
                }
                .title {
                    font-size: calc(var(--fontsize) + 0.125rem);
                    font-weight: 600;
                }
                .content {
                    font-size: calc(var(--m-fontsize) + 0.625rem);
                    flex-grow: unset;
                }
                .title, .content, .button {
                    color: var(--color-light);
                }
                .button {
                    border-bottom-color: var(--color-light);
                }
            }

            @media (min-width: 56em) {
                flex-direction: row;
                .media {
                    width: 325px;
                    height: 325px;
                    min-width: 325px;
                    min-height: 325px;
                }
            }

            @media (--min-fablet) {
                flex-direction: row;
                .media {
                    width: 325px;
                    height: 325px;
                    min-width: 325px;
                    min-height: 325px;
                }
            }

            @media (max-width: 56em) {
                padding: var(--padding) calc(var(--padding) / 2);
                padding-bottom: calc(var(--padding) * 2.5);
                gap: var(--gutter);
                .inner {
                    padding: 0;
                    .title {
                        font-size: var(--fontsize);
                    }
                    .content {
                        font-size: var(--m-fontsize);
                    }
                }
            }

            @media (--max-fablet) {
                padding: var(--padding) calc(var(--padding) / 2);
                padding-bottom: calc(var(--padding) * 2.5);
                gap: var(--gutter);
                .inner {
                    padding: 0;
                    .title {
                        font-size: var(--fontsize);
                    }
                    .content {
                        font-size: var(--m-fontsize);
                    }
                }
            }
        }
    }
}