/* marquer logo */
.marquee-wrapper {
    --size: clamp(6rem, 2rem + 20vmin, 20rem);
    --gap: calc(var(--size) / 10);
    --scroll-end: calc(-100% - var(--gap));
  }
  .marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
  }
  
  .marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll-x 180s linear infinite;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .marquee__group {
      animation-play-state: paused;
    }
  }
  
  .marquee--reverse .marquee__group {
    animation-direction: reverse;
    animation-delay: -3s;
  }
  
  @keyframes scroll-x {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(var(--scroll-end));
    }
  }
  
  .marquee p {
    display: grid;
    place-items: center;
    width: 250px;
    height: 114px;
    background: #FFF;
    aspect-ratio: 16/9;
    border-radius: 10px;
  }
  .marquee p img{
    height: 95px;
  }

  @media screen and (max-width: 1200px) {
    
    .marquee p {
      width: 200px;
      height: 92px;
  }
    .marquee p img{
      height: 90px;
    }

  }

  @media screen and (max-width: 640px) {
      /* marquee */
    .marquee p {
      width: 118px;
      height: 60px;
  }
    .marquee p img{
      height: 50px;
    }

    .marquee__group {
      animation: scroll-x 80s linear infinite;
    }
  }