.landing-page-steps {
   --lp-bg: #fff;
}

.landing-page-steps.white_bg {
   --lp-bg: #fff;
}

.landing-page-steps.grey {
   --lp-bg: #ededed;
}

.landing-page-steps__inner {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.landing-page-steps__title.h1 {
   text-align: center;
}

.landing-page-steps__description.h3 {
   text-align: center;
   margin-bottom: 54px;
}

.landing-page-steps__items {
   --gap: 54px;
   --dash-on: 4px;
   --dash-off: 4px;
   --dash-color: #818181;
   --num: clamp(72px, 96 * (100vw / 1920), 96px);
   display: flex;
   flex-direction: column;
}

.landing-page-steps__item {
   position: relative;
   display: grid;
   grid-template-columns: 1fr var(--num) 1fr;
   gap: clamp(26px, 52 * (100vw / 1920), 52px);
}

.landing-page-steps__item * {
   color: #000;
}

.landing-page-steps__item__heading {
   margin-bottom: 16px;
}

.landing-page-steps__number {
   position: relative;
   aspect-ratio: 1 / 1;
}

.landing-page-steps__number span {
   width: var(--num);
   height: var(--num);
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   position: relative;
   z-index: 2;
   font-weight: 500;
}

.landing-page-steps__number.h2 {
   margin-bottom: 0;
}

.landing-page-steps__connector {
   height: var(--gap);
   background: repeating-linear-gradient(
           to bottom,
           var(--dash-color) 0 var(--dash-on),
           transparent var(--dash-on) calc(var(--dash-on) + var(--dash-off))
   );
   background-repeat: no-repeat;
   background-size: 2px 100%;
   background-position: center;
}

.landing-page-steps__item:not(:last-of-type) {
   margin-bottom: 0;
}

/* ===== DESKTOP ===== */
@media (min-width: 1025px) {
   .landing-page-steps__item::before,
   .landing-page-steps__item::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      background: repeating-linear-gradient(
              to bottom,
              var(--dash-color) 0 var(--dash-on),
              transparent var(--dash-on) calc(var(--dash-on) + var(--dash-off))
      );
      z-index: 1;
   }

   .landing-page-steps__item::before {
      top: 0;
      height: calc(50% - var(--num) / 2);
   }

   .landing-page-steps__item::after {
      top: calc(50% + var(--num) / 2);
      bottom: 0;
   }

   .landing-page-steps__item:first-of-type::before {
      display: none;
   }

   .landing-page-steps__item:last-of-type::after {
      display: none;
   }

   .landing-page-steps__item--left .landing-page-steps__number::after,
   .landing-page-steps__item--right .landing-page-steps__number::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 2px;
      width: clamp(20px, 28 * (100vw / 1920), 32px);
      background: repeating-linear-gradient(
              to right,
              var(--dash-color) 0 var(--dash-on),
              transparent var(--dash-on) calc(var(--dash-on) + var(--dash-off))
      );
   }

   .landing-page-steps__item--left .landing-page-steps__number::after {
      right: 100%;
   }

   .landing-page-steps__item--right .landing-page-steps__number::after {
      left: 100%;
   }
}

/* ===== MOBILE/TABLET ===== */
@media (max-width: 1024px) {
   .landing-page-steps__items {
      gap: 25px;
   }

   .landing-page-steps__item::after {
      display: none;
   }

   .landing-page-steps__item::before {
      content: "";
      position: absolute;
      top: var(--mob-line-top, 0px);
      height: var(--mob-line-height, 100%);
      width: 2px;
      background: repeating-linear-gradient(
              to bottom,
              var(--dash-color) 0 var(--dash-on),
              transparent var(--dash-on) calc(var(--dash-on) + var(--dash-off))
      );
      z-index: 1;
      left: auto;
      right: auto;
      transform: none;
   }

   .landing-page-steps__item--right::before {
      left: calc(var(--num) / 2);
      transform: translateX(-50%);
   }

   .landing-page-steps__item--left::before {
      right: calc(var(--num) / 2);
      transform: translateX(50%);
   }

   .landing-page-steps__item--left .landing-page-steps__number::after,
   .landing-page-steps__item--right .landing-page-steps__number::after {
      content: none;
   }

   .landing-page-steps__connector {
      position: relative;
      z-index: 2;
      height: 2px;
      background: repeating-linear-gradient(
              to right,
              var(--dash-color) 0 var(--dash-on),
              transparent var(--dash-on) calc(var(--dash-on) + var(--dash-off))
      );
      background-repeat: no-repeat;
      width: auto;
   }

   .landing-page-steps__item--left + .landing-page-steps__connector {
      width: calc(100% - var(--num));
      margin-left: calc(var(--num) / 2);
      margin-right: auto;
   }

   .landing-page-steps__item--right + .landing-page-steps__connector {
      width: calc(100% - var(--num));
      margin-right: calc(var(--num) / 2);
      margin-left: auto;
   }

   .landing-page-steps__item--left {
      grid-template-columns: 1fr var(--num);
   }

   .landing-page-steps__item--right {
      grid-template-columns: var(--num) 1fr;
   }

   .landing-page-steps__filler {
      display: none;
   }
}