<div class="featuredTestimonials container">
    <h2 class="featuredTestimonials__title">
        <svg class="featuredTestimonials__titleIcon icon accent-primary" role="presentation">
            <use href="/main-icons-sprite.svg#quote" />
        </svg>
        Some of our thoughtful testimonials.
    </h2>
    <div class="featuredTestimonials__wrapper">
        <blockquote class="featuredTestimonials__testimonial 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="Photo of Abraham Lincoln" class="testimonial__citationPhoto">
                </div>
                <cite class="testimonial__citation">
                    Firstnamerson Lastname
                    <span class="testimonial__citationTitle">
                        Director of Important Titles, CorporateCorp
                    </span>
                </cite>
            </footer>
        </blockquote>
        <blockquote class="featuredTestimonials__testimonial 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="Photo of Abraham Lincoln" class="testimonial__citationPhoto">
                </div>
                <cite class="testimonial__citation">
                    Firstnamerson Lastname
                    <span class="testimonial__citationTitle">
                        Director of Important Titles, CorporateCorp
                    </span>
                </cite>
            </footer>
        </blockquote>
        <blockquote class="featuredTestimonials__testimonial 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="Photo of Abraham Lincoln" class="testimonial__citationPhoto">
                </div>
                <cite class="testimonial__citation">
                    Firstnamerson Lastname
                    <span class="testimonial__citationTitle">
                        Director of Important Titles, CorporateCorp
                    </span>
                </cite>
            </footer>
        </blockquote>
    </div>
</div>

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

.featuredTestimonials {
    &__title {
        align-items: center;
        display: flex;
        flex-direction: column;
        font-size: pronto.fluid-rems(2, 3);
        gap: 1.5rem;
        text-align: center;
    }

    &__titleIcon {
        width: pronto.fluid-rems(2, 4);
        height: pronto.fluid-rems(2, 4);
    }

    &__wrapper {
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
    }
}