.cards {
  margin-top: var(--vertical-outer);
  margin-bottom: var(--vertical-outer);
}

.cards__intro {
  display: flex;
  gap: 0 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: var(--max);
  margin: auto;
  padding: 0 var(--2);
}

.cards__title {
  margin: 0;
}

.cards__items {
  white-space: nowrap;
  overflow: auto;
  scrollbar-width: none;
  margin: var(--3) 0 0;
  scroll-snap-type: x mandatory;
  display: flex;
  &::after,
  &::before {
    content: "";
    display: block;
    width: max(calc(((100vw - var(--max)) / 2)), var(--2));
    flex-shrink: 0;
  }
  &::-webkit-scrollbar {
    display: none;
  }
}