{% set highlightedTestimonials = entry.highlightedTestimonials.all() %}
{% if highlightedTestimonials[0] is defined %}
    <section class="testimonials-list">
        <div class="container">
            <div class="testimonials-list__content">
                <a href="{{ highlightedTestimonials[0].url }}?from={{ entry.id }}" class="testimonials-list__left">
                    <div class="testimonials-list__card">
                        <div class="testimonials-list__card-text">
                            {{ highlightedTestimonials[0].shortDescription }}
                        </div>
                        <div class="testimonials-list__card-footer">
                            <span class="testimonials-list__card-author">— {{ highlightedTestimonials[0].nameText }}</span>
                            <span class="testimonials-list__card-subtitle">{{ highlightedTestimonials[0].cause }}</span>
                        </div>
                    </div>
                    <div class="testimonials-list__image">
                        {% include '_partials/image.twig' with {image: highlightedTestimonials[0].image.one(), class: 'testimonials-list__img', transform: 'maxWidth1000'} %}
                    </div>
                </a>

                <div class="testimonials-list__right">
                    {% if highlightedTestimonials[1] is defined %}
                        <a href="{{ highlightedTestimonials[1].url }}?from={{ entry.id }}" class="testimonials-list__item">
                            <div class="testimonials-list__item-content">
                                <div class="testimonials-list__item-text">
                                    {{ highlightedTestimonials[1].shortDescription }}
                                </div>
                                <div class="testimonials-list__item-footer">
                                    <span class="testimonials-list__item-author">— {{ highlightedTestimonials[1].nameText }}</span>
                                    <span class="testimonials-list__item-subtitle">{{ highlightedTestimonials[1].cause }}</span>
                                </div>
                            </div>
                            <div class="testimonials-list__item-image">
                                {% include '_partials/image.twig' with {image: highlightedTestimonials[1].image.one(), class: 'testimonials-list__item-img', transform: 'maxHeight500'} %}
                            </div>
                        </a>
                    {% endif %}

                    {% if highlightedTestimonials[2] is defined %}
                        <a href="{{ highlightedTestimonials[2].url }}?from={{ entry.id }}" class="testimonials-list__item">
                            <div class="testimonials-list__item-content">
                                <div class="testimonials-list__item-text">
                                    {{ highlightedTestimonials[2].shortDescription }}
                                </div>
                                <div class="testimonials-list__item-footer">
                                    <span class="testimonials-list__item-author">— {{ highlightedTestimonials[2].nameText }}</span>
                                    <span class="testimonials-list__item-subtitle">{{ highlightedTestimonials[2].cause }}</span>
                                </div>
                            </div>
                            <div class="testimonials-list__item-image">
                                {% include '_partials/image.twig' with {image: highlightedTestimonials[2].image.one(), class: 'testimonials-list__item-img', transform: 'maxHeight500'} %}
                            </div>
                        </a>
                    {% endif %}
                </div>
            </div>

            {% if highlightedTestimonials[3] is defined %}
                <a href="{{ highlightedTestimonials[3].url }}?from={{ entry.id }}" class="testimonials-list__full-item">
                    <div class="testimonials-list__full-image">
                        {% include '_partials/image.twig' with {image: highlightedTestimonials[3].image.one(), class: 'testimonials-list__full-img', transform: 'maxWidth500'} %}
                    </div>
                    <div class="testimonials-list__full-content">
                        <div class="testimonials-list__full-text">
                            {{ highlightedTestimonials[3].shortDescription }}
                        </div>
                        <div class="testimonials-list__full-footer">
                            <span class="testimonials-list__full-author">— {{ highlightedTestimonials[3].nameText }}</span>
                            <span class="testimonials-list__full-subtitle">{{ highlightedTestimonials[3].cause }}</span>
                        </div>
                    </div>
                </a>
            {% endif %}
        </div>
    </section>
{% endif %}

{% set testimonials = craft.entries.section('testimonials').orderBy('RAND()') %}
{% if testimonials | length %}
    <section class="testimonials-grid">
        <div class="container">
            <div class="testimonials-grid__items">
                {% for testimonial in testimonials %}
                    {% include 'generic-content/_partials/gridTestimonial.twig' %}
                {% endfor %}
            </div>
        </div>
    </section>
{% endif %}