.video-stories,
.video-stories-viewer {
    display: none;
}

@media screen {
    .video-stories {
        display: block;
        padding: 18px 0 14px !important;
        overflow: hidden;
        background: #fff;
    }

    .video-stories__list {
        display: flex;
        gap: 14px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 12px 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .video-stories__list::-webkit-scrollbar {
        display: none;
    }

    .video-stories__item {
        flex: 0 0 76px;
        width: 76px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #202020;
        font: inherit;
        text-align: center;
        cursor: pointer;
    }

    .video-stories__preview {
        position: relative;
        display: block;
        width: 70px;
        height: 70px;
        margin: 0 auto 7px;
        padding: 3px;
        border: 2px solid #1388b3;
        border-radius: 50%;
        box-sizing: border-box;
    }

    .video-stories__preview img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .video-stories__play {
        position: absolute;
        right: 0;
        bottom: 1px;
        width: 20px;
        height: 20px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: #1388b3;
        box-sizing: border-box;
    }

    .video-stories__play:after {
        content: '';
        position: absolute;
        left: 6px;
        top: 4px;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 6px solid #fff;
    }

    .video-stories__name {
        display: -webkit-box;
        min-height: 32px;
        overflow: hidden;
        font-size: 12px;
        line-height: 16px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .video-stories-viewer {
        position: fixed;
        z-index: 100000;
        inset: 0;
        align-items: center;
        justify-content: center;
        padding: 52px 0 74px;
        background: #000;
        box-sizing: border-box;
        touch-action: pan-y;
    }

    .video-stories-viewer.is-open {
        display: flex;
    }

    .video-stories-viewer__video {
        display: block;
        width: 100%;
        height: 100%;
        max-height: calc(100vh - 126px);
        background: #000;
        object-fit: contain;
    }

    .video-stories-viewer__title {
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 72px;
        right: 72px;
        overflow: hidden;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        line-height: 20px;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .video-stories-viewer__nav {
        position: absolute;
        z-index: 3;
        top: 56px;
        bottom: 74px;
        width: 33%;
        border: 0;
        background: transparent;
    }

    .video-stories-viewer__prev {
        left: 0;
    }

    .video-stories-viewer__next {
        right: 0;
    }

    .video-stories-viewer__close {
        position: absolute;
        z-index: 4;
        right: 18px;
        top: 18px;
        bottom: auto;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255,255,255,.7);
        border-radius: 50%;
        background: rgba(0,0,0,.55);
    }

    .video-stories-viewer__close:before,
    .video-stories-viewer__close:after {
        content: '';
        position: absolute;
        left: 11px;
        top: 19px;
        width: 18px;
        height: 2px;
        background: #fff;
    }

    .video-stories-viewer__close:before {
        transform: rotate(45deg);
    }

    .video-stories-viewer__close:after {
        transform: rotate(-45deg);
    }

    body.video-stories-open {
        overflow: hidden;
    }
}

@media screen and (max-width: 1023px) {
    .video-stories {
        padding-top: 78px !important;
    }
}

@media screen and (min-width: 1024px) {
    .video-stories__list {
        justify-content: center;
    }
}