.reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(48px, calc(70 * var(--u)), 72px) 0 0;
}

.reviews__rating {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin-top: clamp(12px, calc(18 * var(--u)), 22px);
  font-size: clamp(17px, calc(20 * var(--u)), 24px);
  font-weight: 500;
  line-height: 1.15;
}

.reviews__scale {
  color: var(--color-ink-20);
  -webkit-text-stroke: 6px var(--color-white);
  paint-order: stroke fill;
}

.reviews__stars {
  display: flex;
}

.reviews__stars img {
  width: clamp(20px, calc(24 * var(--u)), 28px);
}

.reviews__stars img + img {
  margin-left: calc(clamp(20px, calc(24 * var(--u)), 28px) * -0.125);
}

.reviews__collage {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 620px;
  margin-top: clamp(10px, calc(20 * var(--u)), 24px);
  aspect-ratio: 440 / 765;
}

.reviews__photo {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  aspect-ratio: 1;
  border-radius: 50%;
  animation: reviews-bob calc(5s + var(--i) * 0.7s) var(--ease-in-out) calc(var(--i) * -1.3s) infinite alternate;
}

.reviews__image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Стеклянный ободок и блик поверх круглого фото */
.reviews__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 74%, rgb(255 255 255 / 0.35) 88%, rgb(255 255 255 / 0.85) 98%),
    radial-gradient(60% 22% at 50% 96%, rgb(255 255 255 / 0.45), transparent 70%),
    radial-gradient(34% 20% at 32% 14%, rgb(255 255 255 / 0.35), transparent 70%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7), 0 12px 22px -14px rgb(0 0 0 / 0.45);
  pointer-events: none;
}

/* Поля в процентах считаются от ширины коллажа, а кольцо в макете — 7,4 % диаметра фото */
.reviews__photo_video {
  padding: calc(var(--w) * 0.074);
  background: var(--color-pink-soft);
}

.reviews__photo_video::after {
  inset: 7.4%;
}

.reviews__name {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: reviews-spin 36s linear infinite;
}

.reviews__photo_video .reviews__name {
  inset: 7.4%;
  width: 85.2%;
  height: 85.2%;
}

/* Подпись растягивается вместе с кольцом, а в макете у всех фото шрифт 9 px:
   в единицах SVG (100 на диаметр) это 900 / диаметр кольца в пикселях макета */
.reviews__name text {
  font-family: var(--font-body);
  font-size: calc(900px / var(--d, 124));
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: var(--color-white);
  stroke: rgb(0 0 0 / 0.28);
  stroke-width: 0.8px;
  paint-order: stroke fill;
}

.reviews__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 20%;
  rotate: 90deg;
  translate: -45% -50%;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.35));
  transition: scale 0.35s var(--ease-back);
}

.reviews__badge {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 2;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: max(11px, 3.2cqi);
  font-weight: 800;
  line-height: 0.9;
  color: rgb(255 255 255 / 0.85);
  -webkit-text-stroke: 0.43em var(--color-pink-soft);
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 4px rgb(255 36 134 / 0.3));
}

.reviews__badge img {
  width: 1.25em;
  margin-left: 0.05em;
}

.reviews__quote {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  font-family: var(--font-display);
  font-size: max(11px, 3.18cqi);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-ink-40);
}

.reviews__quote strong {
  font-weight: 400;
  color: var(--color-ink);
}

.reviews__label {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 2;
  font-family: var(--font-display);
  font-size: max(11px, 3.18cqi);
  line-height: 0.8;
  color: var(--color-white);
  -webkit-text-stroke: 0.43em var(--color-pink-soft);
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 4px rgb(255 36 134 / 0.3));
  transform: rotate(-4deg);
}

@keyframes reviews-bob {
  from {
    translate: 0 -2%;
  }

  to {
    translate: 0 2%;
  }
}

/* Вращаем через transform: анимация свойства rotate у SVG пересчитывала раскладку каждый кадр */
@keyframes reviews-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 768px) {
  .reviews {
    padding: 48px 24px;
  }
}