<div class="banners row">
    <style>
        .banners__slider__item__image {
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }
    </style>
    <div class="col-md-8 banners__slider">
        <div class="slider">
            {% for banner in banner_list %}
            <a href="{{ banner.url }}"
               target="_blank"
               class="banners__slider__item"
            <div style="background-image: {% cropped_thumbnail banner "slider_cropping" %};"
                 class="banners__slider__item__image"></div>
            </a>
            {% endfor %}

        </div>
    </div>
    <div class="col-md-4 banners__mini">
        {% if banner_top %}
        <a href="{{ banner_top.url }}"
           target="_blank"
           class="banners__mini__item"
        <div style="background-image: {% cropped_thumbnail banner 'additional_cropping' %};"
             class="banners__slider__item__image"></div>
        </a>
        {% endif %}
        {% if banner_bottom %}
        <a href="{{ banner_bottom.url }}"
           target="_blank"
           class="banners__mini__item"
        <div style="background-image: {% cropped_thumbnail banner 'additional_cropping' %};"
             class="banners__slider__item__image"></div>
        </a>
        {% endif %}
    </div>
</div>