monitor/src/app/learn-how/learn-how.component.css

@media only screen and (min-width: 640px) {
  .process .zero {
    position: relative;
    padding: 0 8% 0 3%;
  }

  .process .zero::after {
    content: "";
    position: absolute;
    background-image: url("/assets/monitor-assets/about/arrows/1.svg");
    top: 57%;
    right: -6%;
    width: 30%;
    height: 21%;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .process .first {
    position: relative;
    padding: 3% 6% 0 4%;
  }

  .process .first::after {
    content: "";
    position: absolute;
    background-image: url("/assets/monitor-assets/about/arrows/2.svg");
    top: 78%;
    right: -9%;
    width: 30%;
    height: 21%;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .process .second {
    position: relative;
    padding: 6% 6% 0 4.8%;
  }

  .process .second::after {
    content: "";
    position: absolute;
    background-image: url("/assets/monitor-assets/about/arrows/3.svg");
    top: 100%;
    left: 50%;
    width: 30%;
    height: 48%;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .process .third {
    position: relative;
    padding: 8% 9% 0 3%;
  }

  .process .third::after {
    content: "";
    position: absolute;
    background-image: url("/assets/monitor-assets/about/arrows/4.svg");
    top: 68%;
    left: -25%;
    width: 30%;
    height: 15%;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .process .fourth {
    position: relative;
    padding: 14% 8% 0 3%;
  }

  .process .fourth::after {
    content: "";
    position: absolute;
    background-image: url("/assets/monitor-assets/about/arrows/5.svg");
    top: 87%;
    left: -25%;
    width: 30%;
    height: 15%;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .process .fifth {
    padding: 16% 10% 0 2%;
  }
}

@media only screen and (max-width: 639px) {
  .process .zero {
    position: relative;
    padding: 0 12% 0 12%;
  }

  .process .zero::after {
    content: "";
    position: absolute;
    background-image: url("/assets/monitor-assets/about/arrows/1.svg");
    top: 100%;
    right: 11%;
    width: 30%;
    height: 21%;
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background-size: contain;
    background-repeat: no-repeat;
  }

  .process .first {
    position: relative;
    padding: 20% 7% 0 12%;
  }

  .process .first::after {
    content: "";
    position: absolute;
    background-image: url("/assets/monitor-assets/about/arrows/2.svg");
    top: 105%;
    left: 2%;
    width: 30%;
    height: 21%;
    -moz-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    background-size: contain;
    background-repeat: no-repeat;
  }

  .process .second {
    position: relative;
    padding: 20% 7% 0 12%;
  }

  .process .second::after {
    content: "";
    position: absolute;
    background-image: url("/assets/monitor-assets/about/arrows/3.svg");
    top: 100%;
    left: 66%;
    width: 30%;
    height: 48%;;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .process .third {
    position: relative;
    padding: 20% 7% 0 16%;
  }

  .process .third::after {
    content: "";
    position: absolute;
    background-image: url("/assets/monitor-assets/about/arrows/4.svg");
    top: 106%;
    left: 5%;
    width: 30%;
    height: 15%;
    -moz-transform: rotate(215deg) scaleY(-1);
    -o-transform: rotate(215deg) scaleY(-1);
    -webkit-transform: rotate(215deg) scaleY(-1);
    transform: rotate(215deg) scaleY(-1);
    background-size: contain;
    background-repeat: no-repeat;
  }

  .process .fourth {
    position: relative;
    padding: 20% 8% 0 16%;
  }

  .process .fourth::after {
    content: "";
    position: absolute;
    background-image: url("/assets/monitor-assets/about/arrows/5.svg");
    top: 100%;
    right: 0;
    width: 30%;
    height: 19%;
    -moz-transform: rotate(310deg);
    -o-transform: rotate(310deg);
    -webkit-transform: rotate(310deg);
    transform: rotate(310deg);
    background-size: contain;
    background-repeat: no-repeat;
  }

  .process .fifth {
    padding: 20% 7.6% 0 16%;
  }
}