/* Б-33 «Кто и чем работает», элемент b-cycle__screens — лента экранов продукта (Б-38) под ролями: на телефоне листается по одному. Источник: пакет B задачи 6.4 */

.b-cycle__role {
  align-content: start;
}

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

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

.b-cycle__screens .c-device--desktop {
  max-width: 30rem;
}

.b-cycle__screen {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  width: 100%;
  scroll-snap-align: center;
}

.b-cycle__screens-note {
  margin-top: var(--space-4);
  text-align: center;
}

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

@media (min-width: 1024px) {
  .b-cycle__screens .c-device--desktop {
    width: 100%;
  }
}

@media (min-width: 1440px) {
  .b-cycle__screens {
    gap: var(--space-9);
  }
}