/* 576 * 700 */
.hero-box__img {
  clip-path: path(
    "M 20,70 L 80,70 A 30,30 0,0,0 110,40 L 110,30 A 30,30 0,0,1 140,0 L 150,0 A 30,30 0,0,1 180,30 L 180,40 A 30,30 0,0,0 210,70 L 556,70 A 20,20 0,0,1 576,90 L 576,700 A 20,20 0,0,1 556,720 L 220,720 A 20,20 0,0,0 200,740 L 200,780 A 20,20 0,0,1 180,800 L 20,800 A 20,20 0,0,1 0,780 L 0,90 A 20,20 0,0,1 20,70 Z"
  );
}

.hero-icon__mountains {
}

.hero-icon__mountains::before,
.hero-icon__route::before,
.hero-icon__camp::before,
.hero-icon__viewport::before {
  content: "";
  position: absolute;
  background-color: white;
  width: 2px;
  height: 10px;
}

.hero-icon__mountains::after,
.hero-icon__route::after,
.hero-icon__camp::after,
.hero-icon__viewport::after {
  content: "";
  position: absolute;
  background-color: white;
  width: 8px;
  height: 8px;
  border-radius: 50px;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.9),
    0 0 0 3px white;

  z-index: 1;
}

.hero-icon__mountains::after {
  top: -16px;
  right: 47px;
}

.hero-icon__mountains::before {
  top: -10px;
  right: 50px;
}

.hero-icon__route::before {
  left: 50px;
  top: -20px;
  height: 20px;
}

.hero-icon__route::after {
  left: 47px;
  top: -26px;
}

.hero-icon__camp::before {
  left: 50px;
  bottom: -20px;
  height: 20px;
}

.hero-icon__camp::after {
  left: 47px;
  bottom: -26px;
}

.hero-icon__viewport::before {
  left: 50px;
  top: -20px;
  height: 20px;
}

.hero-icon__viewport::after {
  left: 47px;
  top: -26px;
}


@media (max-width: 1024px) {
  .hero-box__img {
    clip-path: path(
      "M 20,70 L 90,70 A 20,20 0,0,0 110,50 L 110,20 A 20,20 0,0,1 130,0 L 556,0 A 20,20 0,0,1 576,20 L 576,700 A 20,20 0,0,1 556,720 L 220,720 A 20,20 0,0,0 200,740 L 200,780 A 20,20 0,0,1 180,800 L 20,800 A 20,20 0,0,1 0,780 L 0,90 A 20,20 0,0,1 20,70 Z"
    );
  }
}