.review-section {
  --filled-star-color: var(--yellow-100);
  --empty-star-color: var(--grey-200);
  --dot-bg-color: var(--grey-200);
  --dot-active-bg-color: var(--black-100);
  --star-size: 1.5rem;
}

.review-section .container {
  row-gap: 1.5rem;
  padding-block: 2rem;

  @media (width >= 56.25rem) {
    row-gap: 2.5rem;
    padding-block: 3rem;
  }
}

.review-list {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.review-item {
  flex: 0 0 100%;
  scroll-snap-stop: always;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  row-gap: 2rem;
}

.review-item > * {
  max-width: 40rem;
  margin-inline: auto;
}

.review-title {
  display: flex;
  align-items: center;
  row-gap: 0.5rem;
  flex-direction: column;
  justify-content: center;
}

.review-text {
  text-align: center;
  text-wrap: balance;
}

.review-rating {
  --rating: 5;
  --percent: calc(var(--rating) / 5 * 100%);

  width: calc(var(--star-size) * 5);
  height: var(--star-size);
  background: linear-gradient(90deg, var(--filled-star-color) var(--percent), var(--empty-star-color) var(--percent));
  mask: url('../../assets/icons/star.svg') repeat-x left center;
  mask-size: var(--star-size) auto;
}

.review-dots {
  display: flex;
  justify-content: center;
  column-gap: 0.5rem;
}

.review-dot-item {
  display: flex;
}

.review-dot-button {
  display: flex;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  background-color: var(--dot-bg-color);

  &[aria-current="true"] {
    background-color: var(--dot-active-bg-color);
  }

  &:focus-visible {
    outline-offset: 2px;
  }
}

.review-button {
  justify-self: center;
  margin-top: 1.5rem;
}