{% if school.image_path %}
    {% set im = school.image_path %}
    <div class="card-img border-3 border-top border-bottom rounded-0 border-primary position-relative" style="height: 280px;">
        <a href="{{ path('app_school', {'slug': school.slug}) }}">
            <picture>
                <source type="image/webp" media="(max-width: 575px)" srcset="{{ im | imagine_filter('school_webp_xs') }}">
                <source type="image/webp" media="(max-width: 767px)" srcset="{{ im | imagine_filter('school_webp_sm') }}">
                <source type="image/webp" media="(max-width: 991px)" srcset="{{ im | imagine_filter('school_webp_md') }}">
                <source type="image/webp" media="(max-width: 1199px)" srcset="{{ im | imagine_filter('school_webp_lg') }}">
                <source type="image/webp" media="(max-width: 1399px)" srcset="{{ im | imagine_filter('school_webp_xl') }}">
                <source type="image/webp" media="(min-width: 1400px)" srcset="{{ im | imagine_filter('school_webp_xxl') }}">
                <source media="(max-width: 575px)" srcset="{{ im | imagine_filter('school_xs') }}">
                <source media="(max-width: 767px)" srcset="{{ im | imagine_filter('school_sm') }}">
                <source media="(max-width: 991px)" srcset="{{ im | imagine_filter('school_md') }}">
                <source media="(max-width: 1199px)" srcset="{{ im | imagine_filter('school_lg') }}">
                <source media="(max-width: 1399px)" srcset="{{ im | imagine_filter('school_xl') }}">
                <img src="{{ im | imagine_filter('school_xxl') }}" style="width: 100%; height: 100%; object-fit: cover; object-position: center">
            </picture>
        </a>

        {% if school.image_author_url|default and school.image_author|default %}
            <div class="text-white-50 small position-absolute left-0 bottom-0 px-2" style="background-color: rgba(0,0,0,0.5);">Image by <a href="{{ school.image_author_url|sanitize_url }}" target="_blank">{{ school.image_author|default }}</a></div>
        {% endif %}
    </div>
{% endif %}