.r17 { padding-bottom: 104px; }
.r17 .r16q-head { margin-bottom: 52px; }
.r17-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin: 0; padding: 0; list-style: none; align-items: start; }
.r17 .r16q-art { padding: 12px 12px 12px 0; }
.r17 .r16q-art::before { inset: 0 0 22px 16px; border-radius: 20px; }
.r17 .r16q-card { min-height: 0; gap: 14px; padding: 30px 22px; border-radius: 20px; box-shadow: 0 18px 30px -22px rgba(0,0,0,.5); }
.r17 .r16q-card-anna { transform: rotate(-2.5deg); } .r17 .r16q-card-ben { transform: rotate(2deg); } .r17 .r16q-card-janis { transform: rotate(-1.2deg); }
.r17 .r16q-bub { padding: 13px 18px 15px; box-shadow: 3px 3px 0 var(--ink); }
.r17 .r16q-from { margin-bottom: 6px !important; font-size: 11px; }
.r17 .r16q-from img { width: 18px; height: 18px; }
.r17 .r16q-msg { font-size: 22px; line-height: 1.2; }
.r17 .r16q-msg .rtick { width: 17px; height: 9px; margin-left: 8px; }

/* a) quote under the card */
.r17-a .r16q-card { min-height: 200px; }
.r17-text { margin-top: 26px; padding-right: 8px; }
.r17 .r16q-marks { width: 42px; height: 26px; margin-bottom: 14px; }
.r17 .r16q-quote { font-size: 20px; line-height: 1.45; letter-spacing: -.01em; }
.r17 .r16q-by { margin-top: 22px; gap: 14px; }
.r17 .r16q-ava { width: 48px; height: 48px; font-size: 19px; }
.r17 .r16q-by b { font-size: 16.5px; }
.r17 .r16q-by span { font-size: 14.5px; line-height: 1.35; }

/* b) whole exchange on the card */
.r17-b .r16q-card { padding: 28px 20px 26px; }
.r17-b .r16q-msg { font-size: 20px; }
.r17-reply { justify-self: end; max-width: 94%; margin: 0; padding: 12px 16px 14px; background: var(--ink); border: 2px solid var(--ink); border-radius: 20px 6px 20px 20px; box-shadow: 3px 3px 0 #fff; font: 400 17.5px/1.45 var(--sans); color: #fff; }
.r17-reply-from { display: block; margin-bottom: 5px; font: 400 11px/1 var(--mono); color: #b9b9b0; }
.r17-b .r16q-by { margin-top: 24px; padding-left: 4px; }

/* c) only the client's reply on the card */
.r17-c .r16q-card { min-height: 250px; align-content: center; padding: 30px 22px; }
.r17-solo { max-width: 100%; margin: 0; padding: 16px 20px 18px; background: #fff; border: 2px solid var(--ink); border-radius: 6px 22px 22px 22px; box-shadow: 4px 4px 0 var(--ink); font: 500 20px/1.42 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.r17-solo-from { display: block; margin-bottom: 7px; font: 400 11px/1 var(--mono); color: var(--muted); }
.r17-c .r16q-card-janis .r17-solo { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.r17-c .r16q-by { margin-top: 24px; padding-left: 4px; }

@media (max-width: 960px) {
  .r17-c .r16q-card { min-height: 0; }
  .r17 { padding-bottom: 72px; }
  .r17-grid { grid-template-columns: 1fr; gap: 52px; max-width: 520px; }
  .r17-a .r16q-card { min-height: 170px; }
  .r17 .r16q-quote { font-size: 19px; }
}