@layer modules {
  @keyframes reviewScroller {
    from { translate: 0 0; }
    to { translate: calc(-7 * (clamp(20rem, 62.5vw, 30rem) + 2rem)) 0; }
  }

  #reviews {
    padding-block: 6rem 6rem;
    position: relative;
    &::before {
      content: "";
      display: block;
      position: absolute;
      inset: -10rem 0;
      z-index: -1;
      background: -10% 5rem / 1000px 1000px no-repeat radial-gradient(at center,
        #6AA6FF60,
        #6AA6FF20 50%,
        #0000 70%
      ), 5% 20% /600px 600px no-repeat radial-gradient(at center,
        #b5a9ff30,
        #b5a9ff10 50%,
        #0000 70%
      ), 100% 40% / 1000px 1000px no-repeat radial-gradient(at center,
        #F59A8650,
        #F59A8620 50%,
        #0000 70%
      );
    }
    header {
      text-align: center;
      h2 {
        margin: 1rem 0;
        font-size: clamp(1.8rem, 3.75vw + .675rem, 3rem);
      }
      p {
        max-width: 500px;
        margin: 1rem auto;
        font-size: 1.1rem;
      }
    }

    #review-quotes {
      display: grid;
      grid: auto auto / auto-flow clamp(20rem, 62.5vw, 30rem);
      gap: 2rem;
      margin: 4rem min((1200px - 90vw)/2 - 2rem, -2rem);
      padding: 2rem 0;
      mask: linear-gradient(90deg, #0000, #000 15% 85%, #0000);
      &:hover a { animation-play-state: paused; }
    }
    a {
      place-self: start stretch;
      display: block;
      color: inherit;
      background-color: white;
      border-radius: 1rem;
      text-decoration: none;
      animation: reviewScroller 60s linear infinite;
      transition: box-shadow .3s;
      &:hover { box-shadow: 0 0 1rem rgb(0 0 0 / 15%); }
    }
    blockquote {
      display: grid;
      grid: auto auto / auto 1fr;
      padding: 2rem;
      margin: 0;
      p {
        grid-column: span 2;
        margin: 0 0 2rem;
      }
      img {
        display: block;
        width: 4rem;
        height: 4rem;
        margin: 0 1.2rem 0 0;
        border-radius: 50%;
      }
      cite {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-style: normal;
      }
      .name {
        display: block;
        font-weight: 600;
      }
      .customer-since {
        color: #091121b0;
      }
    }
  }
}