@import "../../assets/css/swiper.min.css";
@import "../../assets/css/cases.css";

:root {
  --general-color: #EC7203;
}

.process__img:nth-child(1) {
  height: 34.432vh;
  right: 93.523vh;
}

.process__img:nth-child(2) {
  height: 42.045vh;
  right: 46.25vh;
}

.content-block-sm, .content-block-md, .content-block-lg {
  margin-left: 15.341vh;
}

.challenge, .solution {
  .vertical-title {
    height: 100vh;
  };
}

.challenge {
  padding: 0 15.341vh 0 16.818vh;
}

.challenge__content:not(.content-block-sm, .content-block-md, .content-block-lg) {
  padding: 0;
  width: auto;
}

.challenge__content:nth-of-type(1), .challenge__content:nth-of-type(5) {
  padding-top: 15.341vh;
}

.challenge__content:nth-of-type(2) .challenge__img {
  height: 76.705vh;
}

.challenge__content:nth-of-type(3) {
  padding-top: 30.682vh;
}

.challenge__content:nth-of-type(4) .challenge__img {
  margin-left: 0;
}

.challenge__content:nth-of-type(4), .challenge__content:nth-of-type(7) {
  .challenge__img {
    height: 100vh;
  }
}

.challenge__content:nth-of-type(6) {
  padding-top: 61.364vh;
  margin-left: -30.682vh;
}

.solution {
  padding: 0 15.341vh;
}

.solution__content:nth-of-type(1) {
  padding-top: 48.75vh;
}

.solution__content:nth-of-type(2) .solution__img {
  height: 75.853vh;
  margin: 18.523vh 0 0 13.523vh;
}

.solution__content:nth-of-type(3) {
  padding-top: 19.886vh;
}

.solution__content:nth-of-type(4) {
  padding-top: 61.364vh;
  margin-left: -30.682vh;
}

.solution__content:nth-of-type(5) .solution__img {
  height: 61.364vh;
  margin-left: 15.341vh;
}

.solution__content:nth-of-type(6) .solution__img {
  height: 84.659vh;
  margin: 15.341vh 0 0 6.55vh;
}

.solution__content:nth-of-type(7) {
  width: 89.205vh;
  padding-top: 30.795vh;
}


.solution__content:nth-of-type(8) .solution__img {
  height: 63.381vh;
  margin: 26.591vh 0 0 8.636vh;
}

.solution__content:nth-of-type(9) {
  padding-top: 15.341vh;
}

.solution__content:nth-of-type(10) {
  padding-top: 51.477vh;
  margin-left: -30.682vh;
}

.solution__content:nth-of-type(11) .solution__img {
  height: 76.705vh;
  margin: 15.341vh 0 0 15.341vh;
}

.solution__content:nth-of-type(12) {
  padding-top: 30.682vh;
}

.technology-stack__item-title {
  white-space: nowrap;
}

.technology-stack__img {
  height: 66.818vh;
}

@media (max-width: 1280px) {
  .process__img:nth-child(1) {
    width: 44.271vw;
    height: auto;
  }

  .process__img:nth-child(2) {
    width: 30.078vw;
    height: auto;
    margin: 0 8.984vw 0 3.125vw;
  }

  .content-block-sm, .content-block-md, .content-block-lg {
    margin-left: 0;
  }

  .challenge, .solution {
    padding: 10.156vw 0 0 0;

    .vertical-title {
      height: auto;
      position: absolute;
      top: 8.594vw;
      left: 1.042vw;
    }

    .challenge__img.challenge__img, .solution__img.solution__img {
      height: auto;
      object-fit: cover;
      margin: 10.156vw 0;
    }
  }

  .challenge__content.challenge__content, .solution__content.solution__content {
    padding: 0 8.594vw 0 10.156vw;
  }

  .content-block-md {
    width: 89.844vw;
  }

  .challenge__content:nth-of-type(1), .solution__content:nth-of-type(1) {
    margin-left: auto;
  }

  .challenge__content:nth-of-type(2) {
    text-align: right;
    padding-right: 0;

    .challenge__img {
      width: 69.531vw;
      height: 60.938vw;
    }
  }

  .challenge__content:nth-of-type(4) .challenge__img {
    width: 81.25vw;
  }

  .challenge__content:nth-of-type(6) {
    margin: 10.156vw 0 0 auto;
  }

  .challenge__content:nth-of-type(7) {
    padding: 0;

    .challenge__img {
      height: 91.406vw;
      width: 100%;
      margin-bottom: 0;
    }
  }

  .solution {
    padding: 10.156vw 0;
  }

  .solution__content.solution__content {
    padding: 0 8.594vw 0 10.156vw;
  }

  .solution__content:nth-of-type(2) .solution__img {
    width: 100%;
  }

  .solution__content:nth-of-type(4) {
    width: 89.844vw;
    margin: 10.156vw 0 0 auto;
  }

  .solution__content:nth-of-type(5) {
    padding: 0;

    .solution__img {
      width: 40.625vw;
      height: 40.625vw;
    }
  }

  .solution__content:nth-of-type(6) {
    padding: 0;
    margin-top: -40.625vw;
    text-align: right;

    .solution__img {
      width: 49.219vw;
      height: 60.938vw;
      margin-top: 0;
    }
  }

  .solution__content:nth-of-type(7), .solution__content:nth-of-type(8) .solution__img, .solution__content:nth-of-type(11) .solution__img {
    width: 100%;
  }

  .solution__content:nth-of-type(10) {
    margin: 10.156vw 0 0 auto;
  }

  .technology-stack__item-title {
    white-space: unset;
  }

  .technology-stack__img {
    width: 60.938vw;
    height: auto;
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  .process {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .process__img:nth-child(1) {
    width: 50.133vw;
    margin: 0 0 0 auto;
  }

  .process__img:nth-child(2) {
    width: 33.867vw;
    margin: 0 0 0 1.067vw;
  }

  .challenge, .solution {
    padding: 15.467vw 12px 0 15px;

    .vertical-title {
      position: static;
      margin-bottom: 14.133vw;
    }

    .challenge__content.challenge__content, .solution__content.solution__content {
      padding: 0;
      width: 100%;
    }

    .challenge__img.challenge__img, .solution__img.solution__img {
      margin: 14.133vw 0;
    }
  }

  .challenge__content:nth-of-type(2) .challenge__img {
    width: 73.067vw;
    height: 73.067vw;
  }

  .challenge__content:nth-of-type(4) .challenge__img, .challenge__content:nth-of-type(7) .challenge__img {
    width: 100%;
  }

  .solution {
    padding-bottom: 15.467vw;
  }

  .solution__content:nth-of-type(5) .solution__img{
    width: 73.333vw;
    height: 61.867vw;
    margin-bottom: 0;
  }

  .solution__content:nth-of-type(6) {
    margin: 0 0 0 auto;

    .solution__img{
      width: 73.333vw;
      height: 92.8vw;
      margin: 4.533vw 0 14.133vw 0;
    }
  }

  .technology-stack__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 14.933vw;
  }

  .technology-stack__item:nth-child(1) {
    grid-row: span 2;
  }

  .technology-stack__img {
    width: 69.067vw;
    margin-right: 12px;
  }
}