.videosida-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
width: 100%;
}
.videosida-card {
min-width: 0;
}
.videosida-card__thumb {
position: relative;
display: block;
width: 100%;
aspect-ratio: 374 / 241;
overflow: hidden;
background: #ddd;
text-decoration: none;
}
.videosida-card__thumb--youtube {
cursor: pointer;
}
.videosida-card__thumb--youtube:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
.videosida-card__thumb--playing {
cursor: default;
}
.videosida-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.videosida-card__iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.videosida-card__play {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 68px;
height: 48px;
transform: translate(-50%, -50%);
pointer-events: none;
}
.videosida-card__play-bg {
fill: #ff0000;
transition: fill 0.2s ease, opacity 0.2s ease;
}
.videosida-card__play-triangle {
fill: #ffffff;
}
.videosida-card__thumb:hover .videosida-card__play-bg,
.videosida-card__thumb:focus-visible .videosida-card__play-bg {
fill: #cc0000;
}
.videosida-card__description {
margin-top: 12px;
padding-left: 20px;
padding-right: 20px;
font-family: "Montserrat", sans-serif;
font-size: 14px;
line-height: 1.5;
color: rgb(231, 240, 244);
}
.videosida-card__description p {
margin-top: 0;
margin-bottom: 0.75em;
}
.videosida-card__description p:last-child {
margin-bottom: 0;
}
.videosida-card__noscript-link {
margin-top: 8px;
font-size: 14px;
}
@media (max-width: 1023.98px) {
.videosida-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}