.marquee {
    display: flex;
    block-size: var(--marquee-item-height);
/*    margin-block: var(--marquee-item-height);*/
    position: relative;
    overflow-x: hidden;
    /* fade edges */
    mask-image: linear-gradient(
      to right,
      hsl(0 0% 0% / 0),
      hsl(0 0% 0% / 1) 30%,
      hsl(0 0% 0% / 1) 70%,
      hsl(0 0% 0% / 0)
    );
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 30%,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    );
  }

  /* marquee--10 variables */
  .marquee--10 {
/*    --marquee-item-width: 20%;
    --marquee-item-height: 20%;
*/
    --marquee-duration: 30s;
    --marquee-items: 10;
  }

  /* Responsive scaling: smaller on mobile, larger on bigger screens */
  @media (max-width: 600px) {
    .marquee--10 {
      --marquee-item-width: 70px;
      --marquee-item-height: 70px;
      --marquee-duration: 35s;
    }
  }

  @media (min-width: 1200px) {
    .marquee--10 {
      --marquee-item-width: 120px;
      --marquee-item-height: 120px;
      --marquee-duration: 60s;
    }
  }

  .marquee__item {
    --marquee-item-offset: max(
      calc(var(--marquee-item-width) * var(--marquee-items)),
      calc(100% + var(--marquee-item-width))
    );
    --marquee-delay: calc(
      var(--marquee-duration) / var(--marquee-items) *
        (var(--marquee-items) - var(--marquee-item-index)) * -1
    );
    position: absolute;
    inset-inline-start: var(--marquee-item-offset);
    transform: translateX(-50%);
    animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
    width: var(--marquee-item-width);
    height: var(--marquee-item-height);
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  /* Slight scale up on hover for effect */
  .marquee__item:hover {
    transform: translateX(-50%) scale(1.1);
    z-index: 10;
  }

  /* Rounded corners in a pattern */
  .marquee__item:nth-child(4n) {
    border-top-right-radius: 1rem;
  }
  .marquee__item:nth-child(4n + 1) {
    border-bottom-right-radius: 1rem;
  }
  .marquee__item:nth-child(4n + 2) {
    border-bottom-left-radius: 1rem;
  }
  .marquee__item:nth-child(4n + 3) {
    border-top-left-radius: 1rem;
  }

  /* Indexes for 10 items */
  .marquee--10 .marquee__item:nth-of-type(1) {
    --marquee-item-index: 1;
  }
  .marquee--10 .marquee__item:nth-of-type(2) {
    --marquee-item-index: 2;
  }
  .marquee--10 .marquee__item:nth-of-type(3) {
    --marquee-item-index: 3;
  }
  .marquee--10 .marquee__item:nth-of-type(4) {
    --marquee-item-index: 4;
  }
  .marquee--10 .marquee__item:nth-of-type(5) {
    --marquee-item-index: 5;
  }
  .marquee--10 .marquee__item:nth-of-type(6) {
    --marquee-item-index: 6;
  }
  .marquee--10 .marquee__item:nth-of-type(7) {
    --marquee-item-index: 7;
  }
  .marquee--10 .marquee__item:nth-of-type(8) {
    --marquee-item-index: 8;
  }
  .marquee--10 .marquee__item:nth-of-type(9) {
    --marquee-item-index: 9;
  }
  .marquee--10 .marquee__item:nth-of-type(10) {
    --marquee-item-index: 10;
  }

  @keyframes go {
    to {
      inset-inline-start: calc(var(--marquee-item-width) * -1);
    }
  }

  /* Pause animation on hover */
  .marquee:hover .marquee__item {
    animation-play-state: paused;
  }