.youtube-container {
    display: flex;
    flex-wrap: wrap;
}

.youtube-link {
    flex: 1 1 250px; /* Элемент занимает минимум 230px */
    gap: 5px;
    margin: auto;
    padding: 5px;
    overflow: hidden; /* Скрыть часть изображения, если оно выходит за пределы контейнера */
    perspective: 1000px; /* Задает перспективу для дочерних элементов */
}
.youtube-link a{

}
.youtube-link img {
    max-width: 100%;
    max-width: 100%;
    height: auto;
    border: 2px solid #262525;
    transition: transform 0.5s ease; /* Плавный переход при наведении */
    transform-style: preserve-3d; /* Сохраняет 3D-эффекты */
}

.youtube-link:hover img {
    transform: scale(1.1) rotateY(10deg); /* Увеличение и поворот по оси Y */
}

.youtube-play { display: block; position: relative; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.youtube-play:focus-visible { outline: 3px solid #087ca8; outline-offset: 3px; }
.youtube-play-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 17px; border-radius: 12px; background: #d00; color: white; font-size: 20px; pointer-events: none; }
.youtube-link iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* Keep the embedded player the same size as the portrait preview tile. */
.public-page .youtube-link { aspect-ratio: 308 / 398; overflow: hidden; }
.public-page .youtube-play, .public-page .youtube-link iframe { width: 100%; height: 100%; }
.public-page .youtube-play img { width: 100%; height: 100%; object-fit: cover; }
.public-page .youtube-link iframe { aspect-ratio: auto; }

/* Rounded preview and player edges. */
.public-page .youtube-link { border-radius: 16px; background: #142532; box-shadow: 0 6px 18px rgba(17, 42, 55, .13); }
.public-page .youtube-link img { border: 0; }