body {
  display: grid;
  grid: 1fr auto / 1fr;
  min-height: 100vh;
}

#testimonials {
  --columns: 2;
  display: grid;
  gap: 1.5rem;
  grid: auto / repeat(var(--columns), 1fr);
  background: bottom center / 100% 200px no-repeat linear-gradient(to bottom,
    #eaf7ff,
    white
  ), #eaf7ff;
  header {
    text-align: center;
    grid-column: span var(--columns);
    padding: 5rem 0;
    h1 {
      margin: 0 auto 1rem;
      font-size: clamp(2rem, 1rem + 3vw, 4rem);
      background: linear-gradient(160deg, #0d1633 20%, #06f 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
    img {
      width: 1.5em;
      height: auto;
      vertical-align: bottom;
    }
    p {
      margin: 0;
      font-size: clamp(1rem, .8vw + .86rem, 1.3rem);
      line-height: 1.75;
    }
    @media (width < 500px){
      padding: 3rem 0;
      img {
        display: block;
        margin: 0 auto 0.3em;
        width: 2em;
      }
    }
  }

  blockquote {
    display: grid;
    grid: auto 1fr auto / 5rem 1fr;
    gap: .5rem 1.5rem;
    padding: 1.5rem 1.5rem;
    margin: 0;
    background-color: white;
    border-radius: .5rem;
    opacity: calc(var(--fade) * var(--fade));
    &:is(:nth-of-type(1), :nth-of-type(2)){
      opacity: 1;
    }
    img {
      grid-area: 1 / 1 / -1 / 2;
      justify-self: center;
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 50%;
    }
    cite {
      margin: 0;
      font-style: normal;
      font-size: .9rem;
    }
    p {
      margin: 0;
    }
    .name {
      font-weight: 600;
    }
    .customer-since {
      margin: 0 0 -.5em -1em;
      color: #757575;
      font-size: .8rem;
      justify-self: end;
    }
    &.long {
      grid-row: span 2;
    }
    @media(width < 500px){
      grid: auto auto / 1fr;
      position: relative;
      margin-left: 2rem;
      padding: 1.2rem 1.5rem;
      border-radius: 1rem;
      img {
        position: absolute;
        width: 2.4rem;
        inset: -.9rem auto auto -4.75rem;
      }
    }
  }
  @media(width < 800px){
    --columns: 1;
  }
}