.testimonial-section>.container {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, var(--color-iron-300) 0);

  .grid {
    row-gap: 0px;
    column-gap: var(--gutter);
    display: grid;
    background: var(--color-iron-300);
    border-bottom-left-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
    color: var(--color-downriver-400);

    div:not(:last-child):not(.quote-mark-container) {
      margin-bottom: var(--baseline);
    }
  }

  @media (min-width: 0) {
    .grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (min-width: 40rem) {
    .grid {
      grid-template-columns: repeat(8, 1fr);
    }
  }

  @media (min-width: 64rem) {
    .grid {
      grid-template-columns: repeat(12, 1fr);
    }
  }

  .testimonial {
    padding-bottom: var(--space-xxl);
    padding-left: var(--gutter);
    border-left: 1px solid var(--color-iron-400);

    h2 {
      color: var(--color-pastel-green-400);
      line-height: var(--line-height);
    }

    blockquote {
      font-size: var(--font-size-lg);
      border-bottom: 1px solid var(--color-downriver-300);
      padding-bottom: var(--baseline);
    }

    .person-container {
      margin-top: var(--baseline);
      align-items: center;
      display: flex;
      column-gap: var(--space-sm);
      line-height: var(--line-height-tight);

      .name {
        font-weight: 500;
      }
    }
  }

  .quote-mark-container {
    padding-top: var(--space-xxl);
    padding-left: var(--gutter);
    padding-bottom: var(--baseline);
    fill: var(--color-pastel-green-400);
  }

  @media (min-width: 0) {
    .testimonial {
      grid-column: span 4;
      padding-top: var(--baseline);
    }

    .quote-mark-container {
      grid-column: 1 / span 1;

      .quote-mark {
        width: var(--space-xl);
      }
    }
  }

  @media (min-width: 40rem) {
    .testimonial {
      grid-column: 2 / span 6;
      padding-top: var(--baseline);
    }

    .quote-mark-container {
      border-left: 1px solid var(--color-iron-400);
      grid-column: 2 / span 1;
    }
  }

  @media (min-width: 64rem) {
    .testimonial {
      grid-column: 3 / span 8;
      padding-top: var(--space-xxl);
    }

    .quote-mark-container {
      grid-column: 2 / span 1;
      border-left: none;
      padding-left: 0;
      margin-left: -1rem;
    }
  }

  @media (min-width: 75rem) {
    .testimonial {
      grid-column: 4 / span 6;
    }

    .quote-mark-container {
      grid-column: 3 / span 1;
    }
  }

  &:nth-of-type(even),
  &:only-of-type {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, var(--color-downriver-400) 0);

    .grid {
      background-color: var(--color-downriver-400);
      color: var(--color-white);
    }

    .testimonial {
      border-left: none;
    }
  }


  margin-bottom: var(--space-xxl);
}