.alt {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: calc(var(--alt-d) * var(--alt-visible));
  /* height: calc(var(--alt-d) + 32px); */

}
.alt__stage {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: var(--alt-d);
  height: var(--alt-d);
}
.alt__line {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--alt-light);
  pointer-events: none;
}
.alt__ring {
  position: absolute;
  inset: 0;
  transition: transform 0.9s cubic-bezier(0.65, 0.05, 0.2, 1);
}
.alt__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(var(--a)) translateY(calc(var(--alt-d) / -2)) rotate(calc(var(--a) * -1));
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
.alt__dot:hover {
  background: #fff;
}
.alt__dot.is-active {
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18);
}
.alt__center {
  position: absolute;
  left: 50%;
  top: calc(var(--alt-d) * 0.16);
  transform: translateX(-50%);
  width: min(50%, 680px);
  text-align: center;
  color: #fff;
}
.alt__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .5s ease,
    visibility .5s;
  pointer-events: none;
}
.alt__item.is-active {
  position: relative;
  visibility: visible;
  pointer-events: auto;
  animation: altFadeUp 2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes altFadeUp {
  from {
    opacity: 0;
    transform: translateY(120px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.alt__img-wrap {
  display: inline-block;
  line-height: 0;
  margin: 0 auto;
}
.alt__img {
  max-width: 320px;
  height: auto;
  display: inline-block;
  margin-top: -150px;
}
.alt__title {
  margin: -25px 0 0 15px;
  font-size: 50px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--alt-light);
}
.alt__desc {
  font-size: 18px;
  text-align: center;
  line-height: 1.4;
  opacity: 1;
  font-weight: 100;
}
.alt__desc p {
  margin: 0;
}
@media (max-width: 782px) {
  .alt__center {
    width: 72%;
    top: calc(var(--alt-d) * 0.12);
  }
  .alt__title {
    font-size: 1.4rem;
  }
  .alt__img {
    max-width: 64px;
  }
}