.steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(48px, calc(69 * var(--u)), 72px) clamp(12px, calc(20 * var(--u)), 32px) 0;
}

.steps__subtitle {
  margin-top: clamp(14px, calc(20 * var(--u)), 22px);
}

.steps__list {
  display: grid;
  gap: clamp(8px, calc(10 * var(--u)), 14px);
  width: 100%;
  max-width: 560px;
  margin-top: clamp(22px, calc(30 * var(--u)), 36px);
}

.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(46px, calc(60 * var(--u)), 72px) minmax(0, 1fr);
  grid-template-areas:
    "icon name"
    "index text";
  column-gap: clamp(12px, calc(18 * var(--u)), 24px);
  row-gap: clamp(14px, calc(22 * var(--u)), 26px);
  align-items: start;
  min-height: clamp(128px, calc(160 * var(--u)), 190px);
  padding: clamp(24px, calc(36 * var(--u)), 40px) clamp(14px, calc(20 * var(--u)), 28px) clamp(22px, calc(30 * var(--u)), 34px) clamp(22px, calc(30 * var(--u)), 36px);
  border-radius: clamp(34px, calc(46 * var(--u)), 52px);
  opacity: 0.3;
  transition:
    opacity 0.6s ease,
    background-color 0.6s ease,
    box-shadow 0.6s ease,
    transform 0.6s var(--ease-back);
}

.steps__item::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: var(--gradient-glass-stroke);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.steps__item_active {
  opacity: 1;
  background-color: var(--color-white);
  box-shadow:
    inset 2.5px 2.5px 16.5px -2.5px rgb(255 255 255 / 0.7),
    inset -2.5px -6.25px 16.5px -5.5px rgb(255 64 157 / 0.4),
    inset 1.25px 1.25px 60px -2.5px rgb(255 255 255 / 0.2),
    inset -8px -9.25px 15px -2.5px rgb(255 255 255 / 0.2),
    0 32px 22px -30px #d7b7c6;
  transform: scale(1.02);
}

.steps__item_active::before {
  opacity: 1;
}

@media (hover: hover) {
  .steps__item:not(.steps__item_active):hover {
    opacity: 0.55;
  }
}

.steps__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: clamp(4px, calc(4.5 * var(--u)), 5px) solid var(--color-black);
  border-radius: 50%;
}

.steps__icon img {
  width: 56%;
  height: auto;
}

/* Человечек в макете крупнее остальных значков: 36 px в круге 54 */
.steps__icon_profile img {
  width: 66%;
}

/* В макете галочка третьего шага развёрнута на 180° */
.steps__icon_check img {
  transform: rotate(180deg);
}

.steps__item_active .steps__icon img {
  animation: steps-bump 0.8s var(--ease-back);
}

.steps__index {
  grid-area: index;
  justify-self: center;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.steps__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: clamp(22px, calc(32 * var(--u)), 38px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0.01em;
}

.steps__text {
  grid-area: text;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--color-ink-40);
}

/* Отдельные scale и rotate не затирают поворот галочки, заданный через transform */
@keyframes steps-bump {
  0% {
    scale: 0.6;
    rotate: -20deg;
  }

  60% {
    scale: 1.15;
    rotate: 6deg;
  }

  100% {
    scale: 1;
    rotate: 0deg;
  }
}

@media (min-width: 768px) {
  .steps {
    justify-content: center;
    padding: 48px 32px;
  }
}