.testimonials-list {
  display: flex;
  gap: 1rem;
  text-align: start;
  overflow-x: auto;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

  @media (max-width: 1024px) {
    width: 100%;
  }

  .testimonials-list-item {
    border-radius: var(--border-radius-lg);
    background-color: var(--brand-primary-700);
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--background-color);
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    max-width: 80%;

    @media (min-width: 769px) {
      max-width: 420px;
      padding: 40px 32px;
    }

    .testimonial-item-text {
      margin-block: var(--block-space-sm);
      color: var(--background-color);
      line-height: 120%;
      font-weight: 500;

      @media (min-width: 1025px) {
        font-size: 1.5rem;
      }
    }

    .testimonials-list-item-brand {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: end;
      gap: 16px;

      img {
        max-width: max-content;
        max-height: 52px;
      }

      a {
        font-size: 0.875rem;
        padding-bottom: 6px;
        text-decoration: underline;
        color: var(--brand-primary-300);

        &:hover {
          text-decoration: none;
        }
      }
    }

    .testimonials-item-author {
      border-top: 1px solid var(--brand-primary-200);
      padding-top: var(--block-space-sm);
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;

      @container (min-width: 1025px) {
        gap: var(--block-space-sm);
      }

      .testimonials-item-author-name {
        font-weight: 500;

        @container (min-width: 1025px) {
          font-size: 1.25rem;
        }
      }

      .testimonials-item-author-company {
        color: var(--brand-primary-300);
        font-size: 0.875rem;

        @container (min-width: 1025px) {
          font-size: inherit;
        }
      }

      img {
        max-width: 54px;
        max-height: 54px;
        border-radius: 50%;
        flex-shrink: 0;

        @container (min-width: 1025px) {
          max-width: 68px;
          max-height: 68px;
        }
      }
    }
  }
}