animated-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  position: relative;
  overflow: hidden;
  @media (min-width: 993px) and (max-width: 1440px) {
    width: 56.25rem;
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 4rem;
    height: 50%;
    z-index: 100;
  }

  &::before {
    left: 0;
    z-index: 1;
    background: linear-gradient(to right, var(--white-500), transparent);
  }

  &::after {
    right: 0;
    z-index: 1;
    background: linear-gradient(to left, var(--white-500), transparent);
  }

  > h2 {
    text-align: center;
    @media (min-width: 993px) {
      width: 50rem;
    }
    @media (min-width: 1441px) {
      width: 61.25rem;
    }
  }

  > logos {
    display: flex;
    width: max-content;
    will-change: transform;

    > img {
      flex-shrink: 0;
      width: 100%;
      aspect-ratio: 1106 / 29;

      @media (min-width: 993px) {
        content: url("../img/Logos.svg");
        aspect-ratio: 1935 / 49;
      }
    }
  }
}