/*
|--------------------------------------------------------------------------
| GRIFUS BANNER
|--------------------------------------------------------------------------
*/

.grifus-ads-rotator {
    position: relative !important;

    display: block !important;

    float: none !important;
    clear: both !important;

    /*
     * Ширина задаётся через banner.json:
     *
     * "width": 1200
     *
     * Но если экран уже — баннер автоматически уменьшается.
     */
    width: min(var(--grifus-banner-width, 1200px),
            calc(100vw - 32px)) !important;

    max-width: none !important;

    /*
     * Красивое центрирование.
     */
    margin:
        var(--grifus-banner-margin, 28px) auto !important;

    /*
     * Никаких дополнительных смещений.
     */
    left: auto !important;
    right: auto !important;
    transform: none !important;

    /*
     * Высота рассчитывается JavaScript
     * по реальной пропорции текущей картинки.
     */
    height: auto;

    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 14px !important;

    box-sizing: border-box !important;

    transition:
        height var(--grifus-banner-fade, 400ms) ease;
}


/*
|--------------------------------------------------------------------------
| Ссылка
|--------------------------------------------------------------------------
*/

.grifus-ads-rotator .grifus-ads-link {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    display: block !important;

    float: none !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;

    line-height: 0 !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

    cursor: pointer !important;
}


/*
|--------------------------------------------------------------------------
| Изображения
|--------------------------------------------------------------------------
|
| Два слоя лежат друг на друге.
| Они не растягиваются по высоте вручную.
| Пропорция картинки сохраняется.
|
*/

.grifus-ads-rotator .grifus-ads-image {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    display: block !important;

    float: none !important;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    opacity: 0;

    pointer-events: none;

    user-select: none;

    box-sizing: border-box !important;

    transition:
        opacity var(--grifus-banner-fade, 400ms) ease;
}


/*
|--------------------------------------------------------------------------
| Активный слой
|--------------------------------------------------------------------------
*/

.grifus-ads-rotator .grifus-ads-image-active {
    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| Мобильная версия
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .grifus-ads-rotator {
        width: calc(100vw - 20px) !important;

        margin-top: 18px !important;
        margin-bottom: 18px !important;

        border-radius: 10px !important;
    }
}