.container {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 calc(-1 * var(--spacing-medium));
  padding: var(--spacing-medium);
  box-sizing: border-box;
}

.scrollArea {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scroll-snap-type: x mandatory;
  gap: calc(var(--spacing-medium) * 0.75);
  padding-bottom: var(--spacing-small); /* Для градиента */
  padding-right: var(--spacing-medium); /* Отступ для последнего элемента */
  margin-right: calc(-1 * var(--spacing-medium)); /* Компенсация отступа контейнера */
}

/* Скрываем скроллбар для Chrome, Safari и Opera */
.scrollArea::-webkit-scrollbar {
  display: none;
}

.buttonWrapper {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px; /* Фиксированная ширина для кнопок */
}

/* Добавляем градиент-индикатор скролла справа */
.container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--spacing-small);
  width: 48px;
  background: linear-gradient(to right, 
    rgba(var(--color-background-rgb), 0) 0%,
    rgba(var(--color-background-rgb), 0.95) 100%
  );
  pointer-events: none;
  opacity: 1;
}