.parsid-carousel {
  width: 100%;
}

.parsid-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.parsid-carousel__header h2 {
  margin: 0;
  color: var(--parsid-text);
  font-size: clamp(18px, 2vw, 24px);
}

.parsid-carousel__controls {
  display: flex;
  gap: 8px;
}

.parsid-carousel__controls button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--parsid-surface-2);
  color: var(--parsid-text);
  cursor: pointer;
}

.parsid-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.parsid-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.parsid-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 220px);
  gap: 16px;
}

.parsid-carousel__item {
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 768px) and (max-width: 1099px) {
  .parsid-carousel__track {
    grid-auto-columns: calc((100% - 50px) * .1923076923);
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .parsid-carousel__track {
    grid-auto-columns: calc((100% - 24px) * .3125);
    gap: 8px;
  }
}