/* Каруселі лендингу. Окремим файлом, як і order.css: style.css лишається
   таким, як його віддав верстальник. */

/* ===== «Створював контент для» ===== */

/* Стрічка на всю ширину екрана, хоча блок .brands вужчий (256px):
   сусідні картки мають визирати з-за країв, як у макеті. Колонка
   центрує ширшу дитину, тож стрічка виступає порівну в обидва боки. */
.brands__row {
  position: relative; width: 100vw; max-width: 390px; height: 120px;
  display: flex; align-items: center; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Відступи по краях, щоб і перша, і остання картка могли стати в центр:
     пів стрічки мінус пів картки плюс її негативне поле. Не через %:
     відсоток у padding рахується від ширини батька (.brands, 256px). */
  padding-inline: calc(min(50vw, 195px) - 129px + 18px);
}
.brands__row::-webkit-scrollbar { display: none; }
.brands__row:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 12px; }

/* Картки однакового розміру, а менша сусідня — це масштаб, а не ширина:
   transform не зсуває розкладку, і прилипання до центру не смикається
   посеред жесту. Негативні поля зводять сусідів ближче, щоб між
   зменшеними картками лишався проміжок 8px, як у макеті. */
.brands__row .brand {
  flex: none; width: 258px; height: 106px; margin: 0 -18px;
  background: #fff;
  scroll-snap-align: center;
  transform: scale(.66); opacity: .4;
  transition: transform .3s ease, opacity .3s ease;
}
.brands__row .brand.is-active { transform: none; opacity: 1; position: relative; z-index: 1; }
/* Обрізка у кожного скриншота своя — з макета, в атрибуті style. */
.brands__row .brand img { position: absolute; user-select: none; pointer-events: none; }

.js-brand-name { transition: opacity .15s ease; }
.js-brand-name.is-changing { opacity: 0; }

/* ===== «Результати учасників» ===== */

/* Поки приклад один, стрілкам нема чого гортати. */
.results.is-single .arrow { display: none; }
.results { touch-action: pan-y; }