.gsh-vk-video-slider {
    position: relative;
    width: 100%; /* Можно задать max-width, если нужно */
    margin: 20px auto;
    padding: 0 40px; /* Отступы для кнопок навигации, если они по бокам */
    box-sizing: border-box;
}

.gsh-vkvs-viewport {
    width: 100%;
    overflow: hidden; /* !Важно: Скрывает слайды за пределами видимой области */
    position: relative;
}

.gsh-vkvs-slides-container {
    display: flex; /* Располагает слайды в ряд */
    position: relative;
    /* Плавный переход для прокрутки */
    transition: transform 0.5s ease-in-out; 
    /* Ниже будет вычисляться в JS, но для примера */
    /* transform: translateX(0%); */ 
}

.gsh-vkvs-slide {
    box-sizing: border-box;
    flex-shrink: 0; /* Запрещает слайдам сжиматься */
    opacity: 0.95; /* Боковые слайды почти полностью видны */
    transform: scale(0.92); /* Боковые слайды чуть меньше */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    margin: 0 10px; /* Отступы между слайдами */
    position: relative; /* Для z-index, если потребуется */
}

.gsh-vkvs-slide.gsh-vkvs-active-slide {
    opacity: 1;
    transform: scale(1); /* Центральный слайд в полном размере */
    z-index: 10;
}

/* Если мы хотим, чтобы ближайшие соседи центрального были чуть больше,
   чем совсем крайние (при отображении более 3-х), можно добавить классы.
   Пока оставим так для простоты, если videosToShow = 3, это будет ок.
   Если videosToShow = 5, то два по бокам от центрального можно сделать scale(0.95) и т.д.
*/

.gsh-vkvs-iframe-wrapper {
    position: relative;
    width: 100%;
    /* Для адаптивных iframe можно использовать трюк с padding-bottom,
       но так как мы вставляем готовый iframe, его размеры будут определять атрибуты.
       Этот wrapper помогает центрировать iframe, если он меньше слайда. */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Фон, если iframe не занимает всю область */
    min-height: 200px; /* Минимальная высота, чтобы было видно */
}

.gsh-vkvs-iframe-wrapper iframe {
    max-width: 100%;
    max-height: 100%; /* Чтобы iframe не вылезал за пределы wrapper'а по высоте */
    display: block;
    border: none; /* Убираем рамку iframe по умолчанию */
}

/* Предотвращаем видимые артефакты при переключении слайдов */
.gsh-vkvs-slide:not(.gsh-vkvs-active-slide) .gsh-vkvs-iframe-wrapper iframe {
    pointer-events: none; /* Отключаем взаимодействие с неактивными iframe */
}

/* Кнопки навигации */
.gsh-vk-video-slider .gsh-vkvs-prev,
.gsh-vk-video-slider .gsh-vkvs-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s ease;
    user-select: none;
    background-color: rgba(0,0,0,0.4);
    border: none;
    z-index: 20;
    line-height: 1; /* Убираем лишнюю высоту из-за символа */
}

.gsh-vk-video-slider .gsh-vkvs-prev {
    left: 5px;
    border-radius: 0 3px 3px 0;
}

.gsh-vk-video-slider .gsh-vkvs-next {
    right: 5px;
    border-radius: 3px 0 0 3px;
}

.gsh-vk-video-slider .gsh-vkvs-prev:hover,
.gsh-vk-video-slider .gsh-vkvs-next:hover {
    background-color: rgba(0,0,0,0.7);
}

.gsh-vk-video-slider .gsh-vkvs-prev.disabled,
.gsh-vk-video-slider .gsh-vkvs-next.disabled {
    opacity: 0.3;
    cursor: default;
}

/* Если видео только одно, но их несколько (для videosToShow=1) */
.gsh-vk-video-slider[data-videos-to-show="1"] .gsh-vkvs-slide {
    opacity: 1; /* Нет смысла в прозрачности */
    transform: scale(1); /* Нет смысла в уменьшении */
    margin: 0; /* Убираем отступы */
}

/* Стили для очень маленьких экранов, если нужно */
@media (max-width: 480px) {
    .gsh-vk-video-slider {
        padding: 0 30px;
    }
    .gsh-vk-video-slider .gsh-vkvs-prev,
    .gsh-vk-video-slider .gsh-vkvs-next {
        font-size: 16px;
        padding: 12px;
    }
     .gsh-vkvs-slide {
        margin: 0 5px; 
    }
}