/* The same capped page frame and heading as Booking, YKI and Student Portal. */
html body.testimonials-page main#main-content.responsive-testimonials {
  --testimonials-frame: min(1600px, calc(100% - clamp(48px, 12vw, 320px)));
  --testimonials-title: clamp(40px, 4.34vw, 84px);
  --testimonials-gap: clamp(28px, 3.3vw, 64px);
  width: var(--testimonials-frame); max-width: none; height: auto;
  min-height: calc(100svh - var(--header-height));
  display: grid; grid-template-rows: max-content max-content;
  row-gap: 40px; margin-inline: auto;
  padding: calc(var(--header-height) + 32px) 0 64px;
  overflow: visible;

  & .workspace-heading { margin: 0; }
  & .workspace-heading h1 {
    font-size: var(--testimonials-title); line-height: 1.02;
    font-weight: 400; letter-spacing: -.045em; text-wrap: balance;
  }
  & .workspace-heading p { font: 300 16px/1.55 var(--sans); margin-top: 18px; }
  & #testimonials-view { min-width: 0; padding-top: 12px; }
  & .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--testimonials-gap); }
  & .testimonial { min-width: 0; gap: 24px; padding-block: 32px; }
  & .testimonial blockquote p { font: 300 16px/1.55 var(--sans); }
  & .testimonial figcaption { font: 400 14px/1.5 var(--sans); }
}

@media (max-width: 1000px) {
  html body.testimonials-page main#main-content.responsive-testimonials {
    --testimonials-frame: calc(100% - 64px);
    --testimonials-title: clamp(40px, 5.5vw, 55px);
    --testimonials-gap: 32px;
    & .testimonials-grid { grid-template-columns: minmax(0, 1fr); }
  }
}

@media (max-width: 767px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  html body.testimonials-page main#main-content.responsive-testimonials {
    --testimonials-frame: calc(100% - 2 * var(--phone-gutter, 24px));
    --testimonials-title: clamp(32px, 9vw, 38px);
    min-height: calc(100svh - 90px); row-gap: 28px;
    padding-top: calc(var(--header-height) + 28px); padding-bottom: 48px;
    & .testimonial { gap: 20px; padding-block: 28px; }
  }
  html:not(.tablet-portrait) body.testimonials-page main#main-content.responsive-testimonials .testimonial :is(blockquote p, figcaption) {
    font-size: 12.5px;
  }
}