/* WRAPPER */
.orbit-wrap {
  display: flex;
  justify-content: center;
}

/* VISUAL */
.orbit-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.orbit-visual {
  position: relative;
  width: 480px;   /* FIXED for debug */
  height: 480px;  /* IMPORTANT */
  margin: auto;
}

/* IMAGE */
.orbit-image {
  position: absolute;
  inset: 30px;
  border-radius: 20px;
  overflow: hidden;
  z-index: 2;
}

.orbit-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ORBIT */
.orbit-anim {
  position: absolute;
  inset: 0;
  animation: spin var(--orbit-speed) linear infinite;
}

.orbit-anim span {
  position: absolute;
  background: var(--orbit-color);
  border-radius: 50%;
}

.orbit-anim span:nth-child(1){top:0;left:50%;width:14px;height:14px;transform:translateX(-50%);}
.orbit-anim span:nth-child(2){right:0;top:50%;width:12px;height:12px;transform:translateY(-50%);}
.orbit-anim span:nth-child(3){bottom:0;left:50%;width:12px;height:12px;transform:translateX(-50%);}
.orbit-anim span:nth-child(4){left:0;top:50%;width:10px;height:10px;transform:translateY(-50%);}

/* RINGS */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--orbit-color);
  opacity: 0.2;
}

.orbit-ring.outer { inset: 0; }
.orbit-ring.inner { inset: 20px; }

/* ANIMATION */
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* RESPONSIVE */
@media (max-width: 768px) {
 .orbit-visual {
  position: relative;
  height: 400px;
  margin: auto;
}
@media (max-width: 480px) {
 .orbit-visual {
  position: relative;
  height: 350px;
  margin: auto;
}
/* =========================
   TABLET RESPONSIVE
========================= */
@media (max-width: 768px) {

  .orbit-visual {
    max-width: 400px;
  }

  .orbit-image {
    inset: 24px;
    border-radius: 18px;
  }

  .orbit-ring.inner {
    inset: 16px;
  }

  .orbit-anim span:nth-child(1){
    width: 12px;
    height: 12px;
  }

  .orbit-anim span:nth-child(2),
  .orbit-anim span:nth-child(3){
    width: 10px;
    height: 10px;
  }

  .orbit-anim span:nth-child(4){
    width: 8px;
    height: 8px;
  }
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media (max-width: 480px) {

  .orbit-visual {
    max-width: 320px;
  }

  .orbit-image {
    inset: 18px;
    border-radius: 16px;
  }

  .orbit-ring.inner {
    inset: 12px;
  }

  .orbit-anim span:nth-child(1){
    width: 10px;
    height: 10px;
  }

  .orbit-anim span:nth-child(2),
  .orbit-anim span:nth-child(3){
    width: 8px;
    height: 8px;
  }

  .orbit-anim span:nth-child(4){
    width: 6px;
    height: 6px;
  }
}