.hero-review-action {
  margin-top: 30px;
}

.hero-review-action + .hero-actions {
  margin-top: 14px;
}

.review-track {
  min-height: 390px;
  display: grid;
  align-items: center;
}

.review-slide {
  display: none;
}

.review-slide.is-active {
  display: block;
  animation: review-fade .35s ease;
}

.review-slide p {
  font-size: clamp(31px, 3.5vw, 52px);
  line-height: 1.08;
}

.review-slide em {
  color: var(--yellow);
}

.review-slide cite {
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}

.review-slide cite small {
  color: rgba(255,255,255,.55);
}

.review-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.review-arrow {
  width: 39px;
  height: 39px;
  border: 1px solid rgba(255,255,255,.58);
  background: transparent;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.review-dots {
  display: flex;
  gap: 7px;
}

.review-dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  padding: 0;
  cursor: pointer;
}

.review-dot.is-active {
  width: 27px;
  border-radius: 99px;
  background: #fff;
}

@keyframes review-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .review-track { min-height: 300px; }
}

@media (max-width: 560px) {
  .hero-review-action .button { width: 100%; }
  .review-track { min-height: 370px; }
  .review-slide p { font-size: 30px; }
}