.directions-intro {
  max-width: none;
}

.directions-intro h2 {
  white-space: nowrap;
  font-size: clamp(17px, 4.2vw, 62px);
  letter-spacing: clamp(-4px, -.24vw, -.8px);
}

.route-visual {
  height: 165px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.route-visual span {
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #dfe6ef;
  box-shadow: 0 14px 30px #10284b18;
}

.route-visual img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.route-visual-exchanges {
  gap: 0;
}

.route-visual-exchanges span {
  width: 112px;
  height: 64px;
  border-radius: 12px;
  padding: 18px 13px;
}

.route-visual-exchanges span:nth-child(1) {
  transform: translate(18px, 20px) rotate(-7deg);
}

.route-visual-exchanges span:nth-child(2) {
  position: relative;
  z-index: 2;
  transform: translateY(-15px);
}

.route-visual-exchanges span:nth-child(3) {
  transform: translate(-18px, 22px) rotate(7deg);
}

.route-visual-exchanges em,
.route-visual-cards em {
  position: absolute;
  right: 6px;
  bottom: 0;
  color: #72b1ff;
  font-size:12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.route-visual-wallets {
  gap: 15px;
}

.route-visual-wallets span {
  width: 72px;
  height: 82px;
  border-radius: 17px;
  padding: 14px;
  position: relative;
}

.route-visual-wallets span:nth-child(2) {
  transform: translateY(-13px);
  border-color: #b9d3f7;
  box-shadow: 0 18px 34px #176ce724;
}

.route-visual-wallets img {
  width: 38px;
  height: 38px;
}

.route-visual-wallets i {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  color: #7b8ca3;
  font-size:12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .8px;
}

.route-visual-cards {
  flex-direction: column;
  gap: 8px;
}

.route-visual-cards span {
  width: min(210px, 92%);
  height: 58px;
  border-radius: 12px;
  padding: 14px 25px;
}

.route-visual-cards span:first-child {
  margin-right: 30px;
}

.route-visual-cards span:nth-child(2) {
  margin-left: 30px;
}

.route-visual-cards em {
  right: 0;
  bottom: -2px;
  color: #176ce7;
}

@media (max-width: 1100px) {
  .route-visual-exchanges span {
    width: 96px;
    padding-inline: 10px;
  }

  .route-visual-wallets {
    gap: 8px;
  }

  .route-visual-wallets span {
    width: 62px;
  }
}

@media (max-width: 600px) {
  .route-visual {
    height: 150px;
  }

  .route-visual-exchanges span {
    width: 105px;
  }

  .route-visual-wallets {
    gap: 14px;
  }

  .route-visual-wallets span {
    width: 72px;
  }
}