<blockquote class="testimonial -aside">
    <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 *;

.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 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 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 {
            height: 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 breakpoint(md) {
            row-gap: 0;
        }

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

            @include 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;
        }
    }
}