.inter-italic {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}

.marquee {
  display: flex;
  block-size: var(--marquee-item-height);
  margin-block: 16px;
  position: relative;
  overflow-x: hidden;
  mask-image: linear-gradient( to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0) );
}

.heading {
  position: absolute;
  z-index: 2;
}

.marquee--8 {
  --marquee-item-width: 100px;
  --marquee-item-height: 100px;
  --marquee-duration: 40s;
  --marquee-items: 10;
}

.marquee--6 {
  --marquee-item-width: 100px;
  --marquee-item-height: 100px;
  --marquee-duration: 40s;
  --marquee-items: 10;
}

.marquee__item {
  --marquee-item-offset: calc(var(--marquee-item-width) * var(--marquee-items));
  --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-left linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}

.marquee--8 .marquee__item {
  animation-name: go-left;
}

.marquee--6 .marquee__item {
  animation-name: go-right;
}

/* Set border radius for some items */

.marquee__item {
  border-radius: 1rem;
}

/* Item index for .marquee--8 */

.marquee--8 .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}

.marquee--8 .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}

.marquee--8 .marquee__item:nth-of-type(3) {
  --marquee-item-index: 3;
}

.marquee--8 .marquee__item:nth-of-type(4) {
  --marquee-item-index: 4;
}

.marquee--8 .marquee__item:nth-of-type(5) {
  --marquee-item-index: 5;
}

.marquee--8 .marquee__item:nth-of-type(6) {
  --marquee-item-index: 6;
}

.marquee--8 .marquee__item:nth-of-type(7) {
  --marquee-item-index: 7;
}

.marquee--8 .marquee__item:nth-of-type(8) {
  --marquee-item-index: 8;
}

.marquee--8 .marquee__item:nth-of-type(9) {
  --marquee-item-index: 9;
}

.marquee--8 .marquee__item:nth-of-type(10) {
  --marquee-item-index: 10;
}

/* Item index for .marquee--6 */

.marquee--6 .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}

.marquee--6 .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}

.marquee--6 .marquee__item:nth-of-type(3) {
  --marquee-item-index: 3;
}

.marquee--6 .marquee__item:nth-of-type(4) {
  --marquee-item-index: 4;
}

.marquee--6 .marquee__item:nth-of-type(5) {
  --marquee-item-index: 5;
}

.marquee--6 .marquee__item:nth-of-type(6) {
  --marquee-item-index: 6;
}

.marquee--6 .marquee__item:nth-of-type(7) {
  --marquee-item-index: 7;
}

.marquee--6 .marquee__item:nth-of-type(8) {
  --marquee-item-index: 8;
}

.marquee--6 .marquee__item:nth-of-type(9) {
  --marquee-item-index: 9;
}

.marquee--6 .marquee__item:nth-of-type(10) {
  --marquee-item-index: 10;
}

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

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