.vs-623fcf47-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000;
}

.vs-623fcf47-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #000;
}

.vs-623fcf47-video-wrapper,
.vs-623fcf47-poster {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
}

.vs-623fcf47-video-wrapper video,
.vs-623fcf47-video-wrapper iframe,
.vs-623fcf47-poster iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vs-623fcf47-play-btn {
    position: relative;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
}

.vs-623fcf47-play-btn:hover {
    transform: scale(1.1);
    background: #e31b23;
}

.vs-623fcf47-caption {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    z-index: 15;
    pointer-events: none;
}

.vs-623fcf47-title {
    margin: 0;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: inline-block;
    border-radius: 4px;
}

.vs-623fcf47-placeholder-preview {
    color: #888;
    font-size: 1.2rem;
    font-style: italic;
    background: #222;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pagination and Nav custom stylings */
.vs-623fcf47-pagination .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}

.vs-623fcf47-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
}

.vs-623fcf47-next,
.vs-623fcf47-prev {
    color: #fff !important;
}


/* ===== VS COLUMN FALLBACK (renders before/without Swiper init) ===== */
.vs-623fcf47-container .swiper-wrapper {
    display: flex;
}
.vs-623fcf47-container .swiper-slide {
    flex: 0 0 auto;
    /* Mobile default: 2 columns */
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
}
@media (min-width: 768px) and (max-width: 1024px) {
    .vs-623fcf47-container .swiper-slide {
        /* Tablet: 1 column */
        width: 100%;
        margin-right: 20px;
    }
}
@media (min-width: 1025px) {
    .vs-623fcf47-container .swiper-slide {
        /* Desktop: 4 columns */
        width: calc((100% - 60px) / 4);
        margin-right: 20px;
    }
}
/* When Swiper is active it sets inline widths/transforms; keep a sensible min height */
.vs-623fcf47-container .swiper-slide .vs-623fcf47-video-wrapper {
    aspect-ratio: 9 / 16;
    width: 100%;
    height: auto;
}