.container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.op {
  transform: rotate(180deg);
}

.chain {
  transform: translateZ(calc(var(--n) * 1px + 3px));
  width: 50%;
  height: 50%;
  display: flex;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: rotate 5s linear infinite;
  }

  .text {
    position: absolute;
    font-size: 2rem;
    font-weight: bold;
    top: 50%;
    left: 50%;
    -webkit-text-stroke: 1px black;
    transform: translate(-50%, -50%);
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}
