:root {
   --size: clamp(10rem, 1rem + 40vmin, 30rem);
   --gap: calc(var(--size) / 14);
   --duration: 60s;
   --scroll-start: 0;
   --scroll-end: calc(-100% - var(--gap));
}

body a {
   transition: var(--transition);
}

.brand-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);
   animation: scroll-x var(--duration) linear infinite;
}

.brand-wrapper {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
   margin: auto;
   max-width: 100vw;
}

/* .brand-marquee img {
      height: 155px;
      aspect-ratio: 1/1;
      object-fit: contain;
   } */

.brand-marquee img {
   height: 170px;
   aspect-ratio: 1;
}

.brand-marquee a {
   background-color: #fff;
   filter: grayscale(1);
   transition: all 0.3s ease-in-out;
}

.brand-marquee a:hover {
   filter: grayscale(0);
   transform: scale(0.9);
}

@keyframes scroll-x {
   from {
      transform: translateX(var(--scroll-start));
   }

   to {
      transform: translateX(var(--scroll-end));
   }
}