.icon-cards {
  position: relative;
  width: 60vw;
  height: 40vw;
  max-width: 450px;
  max-height: 200px;
  color: white;
  perspective: 1000px;
}

.icon-cards__content {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(-35vw) rotateY(0);
  animation: carousel-desktop 10s infinite cubic-bezier(0.77, 0, 0.175, 1);
}

.icon-cards__content.step-animation {
  animation: carousel-desktop 8s infinite steps(1);
}

.icon-cards__item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 380px;
  max-height: 250px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.icon-cards__item:nth-child(1) {
  transform: rotateY(0deg) translateZ(35vw);
}

.icon-cards__item:nth-child(2) {
  transform: rotateY(120deg) translateZ(35vw);
}

.icon-cards__item:nth-child(3) {
  transform: rotateY(240deg) translateZ(35vw);
}

/* Desktop animation */
@keyframes carousel-desktop {
  0%, 17.5% {
    transform: translateZ(-35vw) rotateY(0deg);
  }

  27.5%, 45% {
    transform: translateZ(-35vw) rotateY(-120deg);
  }

  55%, 72.5% {
    transform: translateZ(-35vw) rotateY(-240deg);
  }

  82.5%, 100% {
    transform: translateZ(-35vw) rotateY(-360deg);
  }
}



@media (max-width: 768px) {
  :root {
    --card-width: min(90vw, 420px);
    --card-height: min(55vw, 260px);
    --card-depth: 220px;
  }

  .icon-cards {
    width: var(--card-width);
    height: var(--card-height);
    max-width: none;
    max-height: none;
    margin: auto;
    perspective: 700px;
  }

  .icon-cards__content {
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--card-depth) * -1)) rotateY(0);
    animation: carousel-mobile 10s infinite cubic-bezier(0.77, 0, 0.175, 1);
  }

  .icon-cards__content.step-animation {
    animation: carousel-mobile 8s infinite steps(1);
  }

  .icon-cards__item {
    max-width: none;
    max-height: none;
    border-radius: 10px;
    font-size: clamp(1.6rem, 3vw, 3rem);
    backface-visibility: hidden;
  }

  .icon-cards__item:nth-child(1) {
    transform: rotateY(0deg) translateZ(var(--card-depth));
  }

  .icon-cards__item:nth-child(2) {
    transform: rotateY(120deg) translateZ(var(--card-depth));
  }

  .icon-cards__item:nth-child(3) {
    transform: rotateY(240deg) translateZ(var(--card-depth));
  }
  .icon-cards__item img{
    width: 300px;
  }

}
@keyframes carousel-mobile {
  0%, 17.5% {
    transform: translateZ(calc(var(--card-depth) * -1)) rotateY(0deg);
  }

  27.5%, 45% {
    transform: translateZ(calc(var(--card-depth) * -1)) rotateY(-120deg);
  }

  55%, 72.5% {
    transform: translateZ(calc(var(--card-depth) * -1)) rotateY(-240deg);
  }

  82.5%, 100% {
    transform: translateZ(calc(var(--card-depth) * -1)) rotateY(-360deg);
  }
}
@media (max-width: 480px) {
  :root {
    --card-height: 62vw;
    --card-depth: 180px;
  }

  .icon-cards__content {
    animation-duration: 12s;
  }

  .icon-cards__item {
    font-size: 1.5rem;
    border-radius: 8px;
  }
}