/* Стилі сторінки on-demand (index.html) */

.rl-teaser {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* На десктопі відео вужче на дві колонки з кожного боку (12 з 16).
   Планшет і мобільний — на всю ширину контейнера. */
@media (min-width: 1200px) {
  .rl-teaser {
    width: 75%;
    margin-inline: auto;
  }
}

.rl-teaser-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #000;
  object-fit: cover;
}

.rl-teaser-note {
  color: var(--bs-gray-600);
}

.rl-teaser-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rl-teaser-note a:hover {
  color: #000;
}

.rl-quote-card {
  border-left: 2px solid #000;
  padding: 8px 0 8px 24px;
  max-width: 900px;
}

.rl-quote-card figcaption {
  color: var(--bs-gray-600);
}

@media (min-width: 1200px) {
  .rl-quote-card {
    padding-left: 40px;
  }
}