.testimonial {
    
    align-self: stretch;
    
    grid-template-rows: auto auto 1fr auto;

    padding: 2.25rem 2.5rem 2rem 2.5rem;
    
    position: relative;
  }
    
  .testimonial::before {
    
    content: "";
    
    position: absolute;
    inset: 0;   /* top, right, bottom, left */
    
    z-index: -1;
  }
  
  .testimonial:nth-of-type(1)::before {
    
    background: var(--colour-light-cream);
    
    clip-path: shape(
      from 6% 9%,
      curve to 31% 4% with 10.7% 0% / 21.7% 4.7%,
      curve to 62% 5% with 40.3% 3.3% / 52% 4%,
      curve to 91% 10% with 72% 6% / 85% 5.5%,
      curve to 98% 32% with 97% 14.5% / 97.2% 21.5%,
      curve to 96% 73% with 98.8% 42.5% / 99% 62.7%,
      curve to 80% 94% with 93% 83.3% / 88% 89.8%,
      curve to 48% 98% with 72% 98.2% / 58.8% 98.5%,
      curve to 15% 91% with 37.2% 97.5% / 22.5% 97.7%,
      curve to 3% 58% with 7.5% 84.3% / 4.5% 71.7%,
      curve to 6% 9% with 1.5% 44.3% / 1.3% 18%,
      close
    );
  }

  .testimonial:nth-of-type(2)::before {
    
    background: var(--colour-light-blue);
    
    clip-path: shape(
      from 5% 14%,
      curve to 28% 6% with 9% 6.5% / 19% 7.7%,
      curve to 59% 4% with 37% 4.3% / 49% 3.7%,
      curve to 88% 8% with 69% 4.3% / 81.7% 4.2%,
      curve to 97% 27% with 94.3% 11.8% / 95.5% 17.3%,
      curve to 97% 66% with 98.5% 36.7% / 99.5% 55.3%,
      curve to 82% 91% with 94.5% 76.7% / 89.3% 86%,
      curve to 53% 96% with 74.7% 96% / 63.8% 96.3%,
      curve to 17% 89% with 42.2% 95.7% / 25.2% 96.5%,
      curve to 4% 51% with 8.8% 81.5% / 6% 63.5%,
      curve to 5% 14% with 2% 38.5% / 1% 21.5%,
      close
    );
  }
  
  .testimonial::after {
    
    content: "\201D";
    
    font-family: Georgia, serif;
    font-size: 8rem;
    
    line-height: 1;
    
    position: absolute;
    top: -0.5rem;
    right: 1.5rem;
    
    color: var(--colour-brand-main);
  }
  
  .testimonial * {
    margin: 0;
  }

  .testimonial .starsRating span.svg::after {
    mask-size: 1.5rem;
  }

  .testimonial h3 {
    font-family: "MEDIUM";
    font-size: 1.25rem;
  }

  .testimonial .referee > span.svg::before,
  .testimonial .referee > span.svg::after {
    height: 2.5rem;
  }

  .testimonial .referee > span.svg::before {
    border-radius: 50%;
    background-color: var(--colour-brand-main);
  }

  .testimonial .referee > span.svg::after {
    mask-size: 1.25rem;
    background-color: var(--colour-text-light);
  }
  
  .testimonial .referee > div span:first-of-type {
    font-weight: bold;
  }

  .testimonial .referee > div span:last-of-type {
    font-size: 0.9rem;
  }