.myTeackStacks {
  grid-column: span 3;

  border: 0.1rem solid #0000000a;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),
    linear-gradient(0deg, #f8f7f9, #f8f7f9);
  box-shadow: 0px 0.4rem 0.8rem 0px #0000000a;
  border-radius: 3.2rem;
  position: relative;

  height: 32rem;
}

.myTeackStacks > .slides {
  position: absolute;
  overflow: hidden;
  border-radius: 3.2rem;
  inset: 0;
  overflow: hidden;

  display: grid;
  align-content: center;
  gap: 3.2rem;
}

.myTeackStacks > .slides > ul {
  display: flex;
  gap: 1.6rem;
  height: 10rem;

  animation: my-tech-stack-slide var(--speed, 25s) linear infinite
    var(--reverse, normal);
}

.myTeackStacks > .slides > ul > li {
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 1.6rem;
  list-style: none;
}

.myTeackStacks > .slides > ul > li > * {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.myTeackStacks > .soon {
  display: none;
}

@media screen and (max-width: 1200px) {
  .myTeackStacks > .slides {
    gap: 2.4rem;
  }

  .myTeackStacks > .soon {
    display: block;
  }
}

@keyframes my-tech-stack-slide {
  0% {
    transform: translateX(-3rem);
  }
  100% {
    transform: translateX(calc(-100% + 88.2rem));
  }
}