@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.clients-section {
  display: grid;
  width: min(1150px, 100% - 10px);
  gap: 10px;
  margin: auto;
  padding: 60px 10px;

  & > h1 {
    width: 100%;
    color: var(--blue-darkest);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    text-align: center;
  }

  & > p {
    width: 100%;
    margin: 10px 0 40px;
    color: var(--blue-darker);
    text-align: center;
  }
}

.slider-logos-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 120px;
  max-width: 300px;
  margin: auto;
  background-color: inherit;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
  mask-image: linear-gradient(
    to left,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255) 12.5%,
    rgb(255 255 255) 87.5%,
    rgb(255 255 255 / 0%) 100%
  );

  @media (width >= 23.43rem) {
    max-width: 350px;
  }

  @media (width >= 26.56rem) {
    max-width: 400px;
  }

  @media (width >= 34.37) {
    max-width: 500px;
  }

  @media (width >= 48rem) {
    max-width: 700px;
  }

  @media (width >= 64rem) {
    max-width: 600px;
  }

  @media (width >= 90rem) {
    max-width: 850px;
  }
}

.slider-logos-wrapper .list-clients-logos {
  animation: 20s slide infinite linear;
}

.logo-client-wrapper {
  display: inline-block;

  & > img {
    align-self: center;
    width: 120px;
    height: 120px;
    border-radius: var(--rounded-full);
    box-shadow: var(--shadow-xl);
  }
}

.slider-logos-wrapper .logo-client-wrapper {
  width: 120px;
  height: 120px;
  margin: 0 30px;
}