.reviews {
  padding-bottom: var(--section-spacing);
}

.reviews__card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  gap: 22px;
  width: clamp(330px, calc(27.297px + 43.2432vw), 650px);
  padding: clamp(24px, calc(10.378px + 1.94595vw), 38.4px)
    clamp(32px, calc(5.514px + 3.78378vw), 60px)
    clamp(30px, calc(11.081px + 2.7027vw), 50px)
    clamp(16px, calc(2.757px + 1.89189vw), 30px);
  background: var(--color-cards-bg);
  border-radius: 24px;
}
@media (max-width: 988px) {
  .reviews__card { border-radius: 16px; }
}

/* The glyph is taller than its 51px box on purpose (Figma). */
.reviews__quote {
  flex: none;
  display: block;
  height: 51px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(58px, calc(8.811px + 7.02703vw), 110px);
  line-height: 1;
  color: var(--color-text);
}

.reviews__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18.85px;
}

.reviews__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.reviews__avatar {
  flex: none;
  display: block;
  width: clamp(34px, calc(16.973px + 2.43243vw), 52px);
  height: clamp(34px, calc(16.973px + 2.43243vw), 52px);
  border-radius: 50%;
  background: var(--color-bg);
  object-fit: cover;
}
/* Letter size copies the "G" placeholder's proportion: cap height 0.39
   of the circle. */
.reviews__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(18.4px, calc(9.13px + 1.32432vw), 28.2px);
  line-height: 1;
  color: var(--color-text);
}

.reviews__name {
  margin: 0;
  font-family: var(--font-family-accent);
  font-weight: 400;
  font-size: clamp(14px, calc(4.541px + 1.35135vw), 24px);
  line-height: normal;
  text-transform: lowercase;
  color: var(--color-text);
}

.reviews__text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-l);
  line-height: 1.4;
  color: var(--color-text);
}