/* Несколько карточек в нижней плашке: десктоп — в ряд с разделителями,
   мобильный — автослайдер (см. script.js). При одной карточке эти стили не используются. */

.bottom-sticker-items{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

.bottom-sticker-multi .bottom-sticker-item{
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 16px;
    box-sizing: border-box;
}

.bottom-sticker-multi .bottom-sticker-item + .bottom-sticker-item{
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* на светлых фонах разделитель тёмный */
.bottom-sticker-multi.pink .bottom-sticker-item + .bottom-sticker-item,
.bottom-sticker-multi.blue .bottom-sticker-item + .bottom-sticker-item,
.bottom-sticker-multi.yellow .bottom-sticker-item + .bottom-sticker-item{
    border-left-color: rgba(56, 56, 56, 0.25);
}

@media (max-width: 768px){

    .bottom-sticker-items{
        display: block;
    }

    .bottom-sticker-multi .bottom-sticker-item{
        display: none;
        width: 100%;
        height: 100%;
        border-left: none !important;
    }

    .bottom-sticker-multi .bottom-sticker-item.active{
        display: flex;
        animation: bottomStickerFade 0.6s ease;
    }
}

@keyframes bottomStickerFade{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

/* Иконка карточки (свойство ICON в ИБ): красится в цвет текста через mask */
.bottom-sticker-ico{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    flex: 0 0 20px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}