.collection-navigator-section {
  margin-block: calc(var(--gap, 8px) * 2.5);

  .hero__title {
    font-size: calc(var(--font-headline-size) * 1.15);
  }

  .collection-navigator__carousel {
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
  }

  @media (max-width: 899px) {
    .collection-navigator__carousel {
      scrollbar-width: none;
    }

    .collection-navigator__carousel::-webkit-scrollbar {
      display: none;
    }
  }

  .collection-navigator__list {
    display: flex;
    gap: calc(var(--gap, 1rem));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .collection-navigator__item {
    flex: 0 0 auto;
    width: calc(170px * var(--aspect-ratio-product));
    min-width: 0;
    scroll-snap-align: start;

    .card,
    .card__container,
    .card__picture,
    .card__picture-container,
    .card__title {
      width: 100%;
    }

    .card__img {
      width: 100%;
      height: 170px;
      background-color: #f8f8f8;
      object-fit: contain;
    }

    .card__title {
      margin-top: calc(var(--gap, 8px) * 0.5);
    }
  }
}