<blockquote class="testimonial">
    <svg class="testimonial__icon icon accent-primary" role="presentation">
        <use href="/main-icons-sprite.svg#quote" />
    </svg>
    <p class="testimonial__content">
        Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!
    </p>
    <footer class="testimonial__footer">
        <div class="testimonial__citationPhotoWrapper">
            <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
        </div>
        <cite class="testimonial__citation">
            Firstnamerson Lastname
            <span class="testimonial__citationTitle">
                Director of Important Titles, CorporateCorp
            </span>
        </cite>
    </footer>
</blockquote>

@use "@imarc/pronto/resources/styles/imported" as pronto;

.testimonial {
    $b: &;

    display: grid;
    grid: "quote" 1fr "footer" auto;
    gap: 1rem;
    margin-left: 0;
    padding-left: 0;
    box-shadow: none;

    &:has(&__icon) {
      grid: "icon quote" 1fr "footer footer" auto;

      @include pronto.at(md) {
        grid: "icon quote" 1fr "_ footer" auto;
      }
    }

    &__content {
        grid-area: quote;
        line-height: 2;
        margin-bottom: 0;
    }

    &__citationPhotoWrapper {
        height: 4rem;
        aspect-ratio: 1;
        border-radius: 4rem;
        overflow: hidden;
        flex-shrink: 0;
    }

    &__citationPhoto {
        @include pronto.image-fit(cover);
    }

    &__citation {
        color: var(--root-color-headings);
        line-height: 1.5;
        font-style: normal;
        font-weight: 700;
        font-size: 1rem;
        margin-bottom: 0;
    }

    &__citationTitle {
        display: block;
        color: var(--root-color);
        font-weight: 400;
        font-size: 1rem;
    }

    &__footer {
        grid-area: footer;
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 0;
    }

    &__icon {
        --icon-fill-color: var(--accent-color-600);
        grid-area: icon;
        height: 2.0625rem;
        width: 2rem;
        min-width: 2rem;
        transform: translateY(-50%);
    }

    &.-featured {
        column-gap: 2rem;

        #{$b}__content {
            font-size: 1.5rem;
            line-height: 1.5rem;
        }

        #{$b}__citationPhotoWrapper {
            block-size: 6rem;
        }

        #{$b}__citation {
            font-size: 1.25rem;
            line-height: 1.625;
        }

        #{$b}__icon {
            inline-size: 4rem;
            width: 4.0625rem;
        }
    }

    &.-aside {
        grid-template-columns: 5.5rem 1fr;
        column-gap: 1.5rem;

        @include pronto.breakpoint(md) {
            row-gap: 0;
        }

        #{$b}__content {
            grid-column: 1 / 3;
            grid-row: 2 / 3;

            @include pronto.breakpoint(md) {
                grid-column: 2 / 3;
            }
        }

        #{$b}__citationPhotoWrapper {
            height: 5.5rem;
        }

        #{$b}__citationTitle {
            font-size: .75rem;
        }

        #{$b}__footer {
            grid-column: 1 / 3;
            grid-row: 1 / 2;
            gap: 1.5rem;
        }

        #{$b}__icon {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }
    }
}