How does it works

.layout-center {
  margin: 0 auto;
}
/* common css */
.overflow-hidden {
  overflow: hidden;
}
.section-container {
  width: 1256px;
  margin: 0 auto;
}
.section-vertical-margin {
  margin-top: 128px;
  margin-bottom: 128px;
}
.display-desktop-device--how-it-work {
  display: block;
}
.display-tab-device--how-it-work {
  display: none;
}
.display-mobile-device--how-it-work {
  display: none;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.h-400px {
  height: 400px;
}
.h-193px {
  height: 193px;
}
.it-works-left-one img {
  height: 100%;
}
.it-works-left-two img {
  height: 100%;
}
.it-works-right-one img {
  height: 100%;
}
.it-works-right-two img {
  height: 100%;
}
.how-it-work--header {
  color: #021a15;
  font-family: "din-black";
  font-size: 64px;
  font-style: normal;
  font-weight: 900;
  line-height: 120%;
  margin-bottom: 40px;
  text-transform: uppercase;
}
.it-work-card-text--black {
  color: #021a15;
  font-family: "din-black";
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  margin-bottom: 0px;
  line-height: normal;
  bottom: 20px;
  left: 20px;
  right: 20px;
}
.it-work-card-text--white {
  color: #fff;
  font-family: "din-black";
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  margin-bottom: 0px;
  line-height: normal;
  bottom: 20px;
  left: 20px;
  right: 20px;
}
.it-work-card-text--green {
  font-family: "din-black";
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  margin-bottom: 0px;
  line-height: normal;
  top: 20px;
  left: 20px;
  right: 20px;
}
@media only screen and (min-width: 1024px) and (max-width: 1439px) {
  .banner-text {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 20px;
    color: #b4ee26;
    /* font-family: "DIN"; */
    font-size: 64px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
  }
  .section-container {
    width: calc(100%) !important;
    padding: 0 50px;
  }
  .section-vertical-margin {
    margin-top: 128px;
    margin-bottom: 128px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1023px) {
  .banner-text {
    position: absolute;
    bottom: 10px;
    color: #b4ee26;
    font-family: "DIN";
    font-size: 44px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
  }
  .section-container {
    width: calc(100%) !important;
    padding: 0 50px;
  }
  .section-vertical-margin {
    margin-top: 128px;
    margin-bottom: 128px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
  .section-container {
    width: calc(100%) !important;
    padding: 0 50px;
  }
  .section-vertical-margin {
    margin-top: 40px;
    margin-bottom: 80px;
  }

  .display-desktop-device--how-it-work {
    display: none;
  }
  .display-tab-device--how-it-work {
    display: block;
  }
  .display-mobile-device--how-it-work {
    display: none;
  }
  .section-container {
    width: calc(100% - 30px) !important;
    margin: 0, 15px;
  }
  .section-vertical-margin {
    margin-top: 40px;
    margin-bottom: 80px;
  }
  .flex-col {
    flex-direction: column;
  }
  .how-it-work--header {
    color: #021a15;
    font-family: "din-black";
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    margin-bottom: 30px;
    text-transform: uppercase;
  }
  .it-work-card-text--black {
    color: #021a15;
    font-family: "din-black";
    font-size: 26px;
    font-style: normal;
    font-weight: 900;
    margin-bottom: 0px;
    line-height: normal;
    bottom: 20px;
    left: 20px;
    right: 20px;
  }
  .it-work-card-text--white {
    color: #fff;
    font-family: "din-black";
    font-size: 26px;
    font-style: normal;
    font-weight: 900;
    margin-bottom: 0px;
    line-height: normal;
    bottom: 20px;
    left: 20px;
    right: 20px;
  }
  .it-work-card-text--green {
    font-family: "din-black";
    font-size: 26px;
    font-style: normal;
    font-weight: 900;
    margin-bottom: 0px;
    line-height: normal;
    top: 20px;
    left: 20px;
    right: 20px;
  }
}
@media only screen and (max-width: 481px) {
  /* section container */
  .section-container {
    width: calc(100%) !important;
    padding: 0 15px;
  }
  .section-vertical-margin {
    margin-top: 40px;
    margin-bottom: 80px;
  }
  .display-desktop-device--how-it-work {
    display: none;
  }
  .display-tab-device--how-it-work {
    display: none;
  }
  .display-mobile-device--how-it-work {
    display: block;
  }
  .flex-col {
    flex-direction: column;
  }
  .home-page-banner-btn-wrapper {
    display: flex;
    background-color: #021a15;
  }
  .how-it-work--header {
    color: #021a15;
    font-family: "din-black";
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    line-height: 120%;
    margin-bottom: 30px;
    text-transform: uppercase;
  }
  .it-work-card-text--black {
    color: #021a15;
    font-family: "din-black";
    font-size: 26px;
    font-style: normal;
    font-weight: 900;
    margin-bottom: 0px;
    line-height: normal;
    bottom: 20px;
    left: 20px;
    right: 20px;
  }
  .it-work-card-text--white {
    color: #fff;
    font-family: "din-black";
    font-size: 26px;
    font-style: normal;
    font-weight: 900;
    margin-bottom: 0px;
    line-height: normal;
    bottom: 20px;
    left: 20px;
    right: 20px;
  }
  .it-work-card-text--green {
    font-family: "din-black";
    font-size: 26px;
    font-style: normal;
    font-weight: 900;
    margin-bottom: 0px;
    line-height: normal;
    top: 20px;
    left: 20px;
    right: 20px;
  }
}