@layer theme {
    
    .review {
        .templateContent {
            padding-bottom: var(--padding);
            .inner {
                @media (min-width: 56em) {
                    grid-column: 4 / span 6;
                }
                @media (--min-fablet) {
                    grid-column: 4 / span 6;
                }
                .intro {
                    text-align: left;
                    p, .content {
                        color: var(--color-dark);
                        font-weight: 600;
                        &:not(:last-child) {
                            margin-bottom: var(--padding);
                        }
                    }
                    &:not(.abstract &) {
                        p, .content {
                            font-size: var(--fontsize);
                        }
                        h1, h2, h3, h4, .subTitle {
                            font-family: var(--font-basic);
                            font-size: var(--s-fontsize);
                            color: var(--color1);
                        }
                    }
                    h1 + p,
                    h2 + p {
                        margin-top: var(--gutter);
                    }
                }
            }
            &.abstract {
                padding-bottom: var(--padding);
            }
            &:not(:has(~ .templateContent)):not(:has(~ .templateBackground)) {
                .inner {
                    border-bottom: 1px solid var(--color1);
                    padding-bottom: var(--section);
                }
            }
        }

        .templateMedia + .templateContent {
            padding-top: var(--section);
        }

        .templateBackground + .templateContent {
            padding-top: var(--padding);
        }

        .templateContent + .templateCollection {
            padding-top: calc(var(--section) - var(--padding));
        }

        .templateMedia {
            padding: var(--section) 0 calc(var(--section) / 2) 0;
            .inner {
                align-items: flex-start;
                gap: var(--gutter);
                .intro {
                    display: flex;
                    flex-direction: column;
                    gap: var(--gutter);
                    .title {
                        order: 2;
                        text-align: left;
                        color: var(--color1);
                        font-size: var(--m-fontsize);
                        line-height: var(--m-lineheight);
                    }
                    .content {
                        order: 1;
                        /* background: var(--color1);
                        border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
                        width: fit-content;
                        padding: var(--button-padding); */
                        color: var(--color1);
                        line-height: 1;
                        font-size: var(--fontsize);
                        margin-top: 0;
                        text-align: left;
                    }
                }
            }
        }

        .templateBackground {
            padding: 0;
            .container {
                gap: 0;
            }
            .media {
                position: relative;
                border-radius: var(--small-border-radius);
                overflow: hidden;     
                @media (min-width: 56em) {
                    grid-column: 4 / span 6;
                }     
                @media (--min-fablet) {
                    grid-column: 4 / span 6;
                }
                &:before {
                    display: none;
                }
                img {
                    aspect-ratio: 16 / 9;
                }               
            }
        }
    }

}