.graft-calc__mobile-result {
  display: none;
}

@media (max-width: 520px) {
  .graft-calc__main {
    display: flex;
    flex-direction: column;
  }

  .graft-calc__mobile-result {
    display: block;
    position: relative;
    order: 1;
    z-index: 5;
    width: 100%;
    margin: 0 0 18px;
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 10px 34px 80px rgba(41, 49, 54, 0.12);
    text-align: center;
  }

  .graft-calc__mobile-result .ttl {
    margin-bottom: 6px;
    color: #4e5a65;
    font-size: 15px;
    line-height: 1.35;
  }

  .graft-calc__mobile-result-values {
    display: flex;
    justify-content: center;
    gap: 16px;
    color: #1a1c1e;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.8px;
  }

  .graft-calc__img-wrap {
    order: 2;
  }

  .graft-calc__selected {
    order: 3;
  }

  .graft-calc__info {
    order: 4;
  }

  .graft-calc__info .ttl,
  .graft-calc__info .grafts,
  .graft-calc__info .hairs {
    display: none;
  }

  .graft-calc__schema .zone.graft-calc__hint-zone:not(.active) {
    opacity: 0.64;
    animation: graft-calc-mobile-hint 500ms ease-in-out 1;
  }
}

@media (max-width: 374px) {
  .graft-calc__mobile-result {
    padding: 16px;
  }

  .graft-calc__mobile-result-values {
    gap: 10px;
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .graft-calc__schema .zone.graft-calc__hint-zone {
    animation: none;
  }
}

@keyframes graft-calc-mobile-hint {
  0%,
  100% {
    opacity: 0.28;
  }

  45% {
    opacity: 0.72;
  }
}