.reviews-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 0 14px;
  cursor: grab;
}
.reviews-grid::-webkit-scrollbar { display: none; }
.reviews-grid > .review-card {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}
.review-quote { margin: 24px 0 0; flex: 1; }
.review-quote p { font-size: 14px; line-height: 1.85; color: var(--muted); margin: 0; }
.review-person { margin-top: 25px; }
.review-person small { display: block; line-height: 1.7; }
.reviews-navigation { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 14px; }
.reviews-instruction { font-size: 10px; color: var(--muted); }
.reviews-controls { display: flex; align-items: center; gap: 10px; }
#reviews-count { font-size: 10px; color: var(--muted); margin-right: 10px; min-width: 53px; }
.review-arrow { width: 42px; height: 42px; display: grid; place-items: center; color: var(--ink); font-size: 20px; border-radius: 50%; transition: translate .2s, opacity .2s; }
.review-arrow:hover:not(:disabled) { translate: 0 -2px; }
.review-arrow:disabled { opacity: .3; }
.reviews-grid.dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
@media (max-width: 1000px) and (min-width: 761px) {
  .reviews-grid > .review-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 760px) {
  .reviews-grid { gap: 14px; }
  .reviews-grid > .review-card { flex-basis: 88%; }
  .reviews-navigation { gap: 10px; }
  .reviews-instruction { font-size: 9px; max-width: 140px; }
  .reviews-controls { gap: 7px; }
  #reviews-count { margin-right: 2px; font-size: 9px; }
  .review-arrow { width: 37px; height: 37px; }
}