/* Б-38 Экраны продукта, видео. Источник: новый макет (задача 6.3) */

.b-screens {
  padding-block: var(--space-section);
  background: var(--color-surface);
}

.b-screens__track {
  display: grid;
  grid-auto-columns: 78%;
  grid-auto-flow: column;
  gap: var(--space-gutter);
  margin-inline: calc(-1 * var(--container-pad));
  padding: var(--space-2) var(--container-pad) var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
}

.b-screens__item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-3);
  scroll-snap-align: center;
}

.b-screens__item .c-device--tsd {
  width: min(100%, 13rem);
}

.b-screens__caption {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  text-align: center;
}

.b-screens__note {
  margin-top: var(--space-3);
}

/* Превью видео: кнопка воспроизведения, ролик грузится только по нажатию */
.b-screens__video {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--gradient-accent-panel);
  color: var(--color-text-inverse);
}

.b-screens__play {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-standard);
}

.b-screens__video:hover .b-screens__play {
  transform: scale(1.08);
}

.b-screens__video:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.b-screens__video-label {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-5);
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 768px) {
  .b-screens__track {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}