:where(.component-testimonial) {
    container-type: inline-size;
    container-name: testimonial-container;

    :where(.component-wrapper) {
        :where(.region) {
            :where(.content-wrap) {
                display: grid;
                row-gap: var(--size-small);
                justify-content: start;
                width: 100%;

                :where(& > *) {
                    width: 100%;
                }

                :where(.header) {
                    margin: 0;
                    /*font-size: var(--font-size-h1);*/
                }
            }
        }
    }

    :where(.blockquote) {
        display: grid;
        grid-template-columns: .1rem 1fr;
        column-gap: var(--size-medium);
        row-gap: 1rem;
        margin-inline: auto;
        margin-block: 0;

        :where(.blockquote *) {
            margin: 0;
        }

        :where(.blockquote > *) {
            grid-column: 2;
        }

        :where(& > svg) {
            grid-column: 1;
            grid-row: 1 / 3;
            margin-top: 3px;
            width: 2.5rem;
            height: 2.5rem;
        }
    }

    :where(.copy) {
        font-size: 1.6rem;
    }

    :where(.attribution) {
        margin-top: .8rem;
        line-height: .5;
    }

    :where(.attribution cite) {
        font-size: 1.4rem;
        font-weight: normal;
        font-style: normal;
    }
}

@container testimonial-container (  inline-size < calc(144rem + 4rem + 4rem)) {
    :where(.component-testimonial) {
        :where(& > .component-wrapper) {
            :where(& > .region) {
                max-width: 100%;
                padding-inline: var(--size-medium);
            }
        }
    }
}

@container testimonial-container (  inline-size < 80rem) {
    :where(.component-testimonial) {
        :where(& > .component-wrapper) {
            :where(& > .region) {
                :where(.blockquote) {
                    grid-template-columns: 1fr;
                    row-gap: 0;
                }

                :where(.blockquote *) {
                    grid-column: 1;
                }

                :where(.blockquote > svg) {
                    grid-row: 1;
                    max-height: 10rem;
                    margin-bottom: var(--size-x-small);
                }

                :where(.title) {
                    font-size: 3rem;
                    line-height: 1.1;
                }
            }
        }
    }
}