@layer addon {
    .review {
        .templateCover {
            margin-top: calc(200px - var(--section));
            .media {
                position: relative;
                order: 2;
                border-radius: var(--border-radius);
                &:before {display: none}
            }
            .media, .inner {
                grid-column: 3 / span 8;
                @media (max-width: 56em) {
                    grid-column: span 12;
                }
                @media (--max-fablet) {
                    grid-column: span 12;
                }
            }
        }
        @media (min-width: 56em) {
            .templateCover, .templateContent {
                .inner {
                    padding: 0 var(--section);
                }
            }
        }
        @media (--min-fablet) {
            .templateCover, .templateContent {
                .inner {
                    padding: 0 var(--section);
                }
            }
        }

        .templateContent {
            h2 + p {
                padding-top: calc(var(--gutter) / 2);
            }
            .content {
                color: var(--font-color);
            }
        }

        .templateCover + .templateContent {
            padding-top: 0;
        }
        
        .templateQuote {
            padding-top: 0;
            .block.quote {
                grid-column: 4 / span 6;
                @media (max-width: 56em) {
                    grid-column: span 12;
                }
                @media (--max-fablet) {
                    grid-column: span 12;
                }
            }
        }
    }
}