.featured-reviews {
  --slide-height: 670px;
  --slide-base: var(--color-3);
  --slide-accent: var(--color-3);
}

.featured-reviews component-scroll {
  --scroll-button-width: 0px;
}

.featured-reviews .scroll-track {
  display: flex;
  margin-inline: 0;
  padding-inline: 0;
}

@media (pointer: coarse) {
  component-scroll.featured-reviews-scroll.state--scrollable .scroll-track {
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}

.featured-review-slide {
  display: grid;
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: var(--slide-height);
  align-items: center;
  justify-items: center;
  overflow: hidden;
  container-type: inline-size;
  background-color: var(--color-4);
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--slide-base) 80%, var(--color-4)) 0%,
    color-mix(in srgb, var(--slide-accent) 80%, var(--color-4)) 50%,
    var(--color-4) 100%
  );
}

.featured-review-photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.featured-review-photo {
  --photo-frame: min(100cqw, 1440px);

  position: absolute;
  left: calc(var(--photo-frame) * var(--photo-x) / 100 + (100cqw - var(--photo-frame)) * var(--photo-anchor, 0));
  top: var(--photo-y);
  width: calc(var(--photo-frame) * var(--photo-size) / 100);
  aspect-ratio: 1;
  padding: 0.46%;
  border-radius: 3px;
  background-color: var(--color-4);
  box-shadow: 0 4px 14px rgba(31, 57, 95, 0.12);
  translate: -50% -50%;
  rotate: var(--photo-rotate, 0deg);
}

.featured-review-photo-asset {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  object-fit: cover;
}

.featured-review-copy {
  position: relative;
  z-index: 1;
  width: min(640px, 52%);
  min-height: 200px;
  color: var(--color-1);
  text-align: center;
}

.featured-review-stars svg {
  width: 34px;
  height: 34px;
}

.featured-review-quote {
  margin-top: var(--s1);
  font-size: var(--t2);
  line-height: 1.3;
}

.featured-reviews-arrows {
  display: flex;
  position: absolute;
  z-index: 2;
  top: calc(50% + 115px);
  left: 50%;
  gap: 30px;
  translate: -50% 0;
}

.featured-reviews-arrow {
  display: flex;
  width: 22px;
  padding: var(--s0);
  border: 0;
  background: none;
  color: var(--color-1);
  cursor: pointer;
  box-sizing: content-box;
}

.featured-reviews-arrow svg {
  width: 22px;
  height: auto;
}

.featured-reviews-arrow-prev svg {
  rotate: 180deg;
}

@media (min-width: 768px) {
  .featured-review-slide:nth-child(4n + 1) .featured-review-photo {
    --photo-size: 15.65;
  }

  .featured-review-slide:nth-child(4n + 1) .featured-review-photo:nth-child(1) {
    --photo-x: 14.49;
    --photo-y: 31.89%;
    --photo-rotate: 8.23deg;
  }

  .featured-review-slide:nth-child(4n + 1) .featured-review-photo:nth-child(2) {
    --photo-x: 91.78;
    --photo-anchor: 1;
    --photo-y: 69.46%;
    --photo-rotate: -13.7deg;
  }

  .featured-review-slide:nth-child(4n + 2) .featured-review-photo {
    --photo-size: 23.58;
  }

  .featured-review-slide:nth-child(4n + 2) .featured-review-photo:nth-child(1) {
    --photo-x: 12.18;
    --photo-y: 75.28%;
    --photo-rotate: 9.45deg;
  }

  .featured-review-slide:nth-child(4n + 2) .featured-review-photo:nth-child(2) {
    --photo-x: 87.87;
    --photo-anchor: 1;
    --photo-y: 29.01%;
    --photo-rotate: -9.45deg;
  }

  .featured-review-slide:nth-child(4n + 3) .featured-review-photo {
    --photo-size: 14.93;
  }

  .featured-review-slide:nth-child(4n + 3) .featured-review-photo:nth-child(1) {
    --photo-x: 13.02;
    --photo-y: 49.93%;
    --photo-rotate: 4.23deg;
  }

  .featured-review-slide:nth-child(4n + 3) .featured-review-photo:nth-child(2) {
    --photo-x: 86.98;
    --photo-anchor: 1;
    --photo-y: 49.92%;
    --photo-rotate: -5.41deg;
  }

  .featured-review-slide:nth-child(4n + 4) .featured-review-photo {
    --photo-size: 13.94;
  }

  .featured-review-slide:nth-child(4n + 4) .featured-review-photo:nth-child(1) {
    --photo-x: 13.95;
    --photo-y: 23.26%;
    --photo-rotate: -9.01deg;
  }

  .featured-review-slide:nth-child(4n + 4) .featured-review-photo:nth-child(2) {
    --photo-x: 93.44;
    --photo-anchor: 1;
    --photo-y: 28.13%;
    --photo-rotate: -3.02deg;
  }

  .featured-review-slide:nth-child(4n + 4) .featured-review-photo:nth-child(3) {
    --photo-x: 6.7;
    --photo-y: 73.51%;
    --photo-rotate: 2.41deg;
  }

  .featured-review-slide:nth-child(4n + 4) .featured-review-photo:nth-child(4) {
    --photo-x: 84.15;
    --photo-anchor: 1;
    --photo-y: 74%;
    --photo-rotate: 4.43deg;
  }
}

@media (max-width: 767px) {
  .featured-reviews {
    --slide-height: 600px;
  }

  .featured-review-copy {
    width: min(463px, 86%);
    min-height: 215px;
  }

  .featured-review-stars svg {
    width: 30px;
    height: 30px;
  }

  .featured-review-quote {
    font-size: var(--t1);
  }

  .featured-reviews-arrows {
    top: calc(50% + 125px);
  }

  .featured-review-slide .featured-review-photo:nth-child(n + 3) {
    display: none;
  }

  .featured-review-slide .featured-review-photo {
    --photo-size: 34;
  }

  .featured-review-slide .featured-review-photo:nth-child(1) {
    --photo-x: 15;
    --photo-y: 18%;
    --photo-rotate: 7.5deg;
  }

  .featured-review-slide .featured-review-photo:nth-child(2) {
    --photo-x: 86;
    --photo-y: 78%;
    --photo-rotate: -9deg;
  }
}

@media (pointer: coarse) {
  .featured-reviews-arrow {
    padding-block: 17px;
    margin-block: -7px;
  }
}
