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

:root {
  --general-color: #387FD6;
}

@media (min-width: 1281px) {
  .vertical-title {
    font: 700 17.045vh/1.35 var(--font);
  }
}

.case-cover__img {
  height: 100vh;
  width: auto;
}

.process__img {
  height: 34.886vh;
  top: 5.568vh;
  right: 61.364vh;
}

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

.challenge {
  padding-left: 15.341vh;
}

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

.challenge__content, .solution__content, .solution__content--color {
  margin-left: 15.341vh;
}

.challenge__img, .solution__img {
  object-fit: cover;
  margin-left: 0;
}

.challenge__content:nth-of-type(1) {
  padding-top: 16.25vw;
}

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

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

.challenge__content:nth-of-type(4), .challenge__content:nth-of-type(11), .challenge__content:nth-of-type(13), .solution__content:nth-of-type(2), .solution__content--color:nth-of-type(3), .solution__content:nth-of-type(12) {
  .challenge__img, .solution__img {
    height: 100vh;
    width: auto;
  }
}

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

.challenge__content:nth-of-type(6), .solution__content:nth-of-type(6) {
  display: flex;
  align-items: flex-end;

  .challenge__img, .solution__img {
    height: 84.659vh;
  }
}

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

.challenge__content:nth-of-type(8), .solution__content--color:nth-of-type(2), .solution__content--color:nth-of-type(5) {
  padding-top: 55.114vh;
  margin-left: -45.909vh;
}

.challenge__content:nth-of-type(9) .challenge__img {
  height: 61.364vh;
}

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

.challenge__content:nth-of-type(11), .solution__content:nth-of-type(12) {
  margin-left: 0;
}

.solution {
  padding: 0 15.341vh;
}

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

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

.solution__content:nth-of-type(4) .solution__img {
  height: 76.705vh;
}

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

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

.solution__color-container {
  background-color: var(--general-color);
  color: var(--white);
  padding-right: 15.341vh;
  display: flex;
  margin-left: 30.682vh;
}

.solution__content--color:nth-of-type(1), .solution__content--color:nth-of-type(4) {
  padding-top: 19.545vh;
}

.solution__content--color:nth-of-type(2) {
  padding-top: 65.568vh;
}

.solution__content--color:nth-of-type(5) {
  padding-top: 67.727vh;
}

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

.solution__content:nth-of-type(10) .solution__img {
  height: 76.705vh;
}

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

.solution__content:nth-of-type(13) {
  padding-top: 46.023vh;
}

.solution__content:nth-of-type(14) {
  display: flex;
  align-items: center;

  .solution__img {
    height: 69.318vh;
  }
}

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

.delivered-features__container {
  display: flex;
}

.delivered-features__title {
  width: fit-content;
}

.delivered-features__list:nth-child(1) .delivered-features__item:last-child {
  width: 61.364vh;
}

.delivered-features__list:nth-child(2) {
  width: 72.727vh;
}

.technology-stack__img {
  height: 66.818vh;
}

@media (max-width: 1280px) {
  .case-cover__img {
    width: 100%;
    height: auto;
  }

  .process__img {
    width: 55.599vw;
    height: auto;
    margin: 3.125vw 10.156vw 3.125vw auto;
  }

  .process__item {
    .process__item-text--duration {
      width: auto;
    }

    br {
      display: none;
    }
  }

  .challenge {
    padding: 7.552vw 0 0;

    .vertical-title {
      position: absolute;
      top: 7.552vw;
      left: 1.042vw;
    }
  }

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

    .content-block-lg, .content-block-md {
      padding: 0 8.594vw 0 10.156vw;
    }
  }

  .challenge__content.challenge__content .challenge__img, .solution__content.solution__content .solution__img {
    height: auto;
    margin: 10.156vw 0;
  }

  .challenge__content, .solution__content, .solution__content--color {
    margin-left: 0;
  }

  .challenge__content:nth-of-type(1), .solution__content:nth-of-type(1) {
    padding-left: 20.313vw;
  }

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

    .challenge__img {
      width: 69.531vw;
    }
  }

  .challenge__content:nth-of-type(4) {
    text-align: center;

    .challenge__img {
      width: 84.375vw;
    }
  }

  .challenge__content:nth-of-type(6) .challenge__img {
    width: 81.25vw;
    height: 60.938vw;
    margin: 10.156vw 8.594vw 10.156vw 10.156vw;
  }

  .challenge__content:nth-of-type(7) {
    padding-right: 19.01vw;
  }

  .challenge__content:nth-of-type(8) {
    padding-left: 20.313vw;
    margin: 10.156vw 0 0;
  }

  .challenge__content:nth-of-type(9) {
    text-align: right;

    .challenge__img {
      width: 79.688vw;
    }
  }

  .challenge__content:nth-of-type(11), .challenge__content:nth-of-type(13) {
    .challenge__img {
      width: 100vw;
    }
  }

  .solution {
    padding: 10.156vw 0;
  }

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

  .solution__content:nth-of-type(4) {
    text-align: right;

    .solution__img {
      width: 70.313vw;
    }
  }

  .solution__content:nth-of-type(6) .solution__img {
    width: 81.25vw;
    margin: 10.156vw 8.594vw 10.156vw 10.156vw;
  }

  .solution__color-container {
    margin: 10.156vw 0;
    padding: 10.156vw 0;
    flex-direction: column;
  }

  .solution__content--color:nth-of-type(2), .solution__content--color:nth-of-type(5) {
    padding: 10.156vw 8.594vw 0 20.313vw;
    margin-left: 0;
  }

  .solution__content--color:nth-of-type(3) .solution__img {
    width: 100vw;
    height: auto;
    margin: 10.156vw 0;
  }

  .solution__content--color:nth-of-type(4) {
    padding-right: 18.75vw;
  }

  .solution__content:nth-of-type(9) {
    margin: 0;
    padding-right: 18.75vw;
  }

  .solution__content:nth-of-type(10) {
    text-align: right;

    .solution__img {
      width: 70.313vw;
    }
  }

  .solution__content:nth-of-type(12) {
    text-align: center;

    .solution__img {
      width: 88.802vw;
    }
  }

  .solution__content:nth-of-type(14) .solution__img {
    width: 81.25vw;
    margin: 10.156vw 8.594vw 10.156vw 10.156vw;
  }

  .delivered-features__container {
    flex-direction: column;
    gap: 1.042vw;
  }

  .delivered-features__list:nth-child(1) .delivered-features__item:last-child {
    width: 61.198vw;
  }

  .delivered-features__list:nth-child(2) {
    width: auto;
    margin-top: 0;
  }

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

@media (max-width: 600px) {
  .process__img {
    width: 89.6vw;
    margin: 0 0 0 auto;
  }

  .challenge {
    padding: 15.467vw 12px 15.467vw 15px;
  }

  .challenge {
    .content-block-lg, .content-block-md {
      padding: 0;
    }
  }

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

  .challenge__content:nth-of-type(1) {
    padding-top: 14.133vw;
  }

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

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

  .challenge__content:nth-of-type(6) {
    justify-content: flex-end;

    .challenge__img {
      width: 81.067vw;
      height: 65.333vw;
      margin: 14.133vw 0;
    }
  }

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

  .challenge__content:nth-of-type(8) {
    padding: 0;
    margin: 14.133vw 0 0;
  }

  .challenge__content:nth-of-type(9) {
    text-align: left;

    .challenge__img {
      width: 73.333vw;
      height: 61.867vw;
    }
  }

  .challenge__content:nth-of-type(11), .challenge__content:nth-of-type(13) {
    .challenge__img {
      width: 100%;
      margin-bottom: 0;
    }
  }

  .challenge__content:nth-of-type(11) .challenge__img {
    margin-bottom: 14.133vw;
  }

  .solution {
    padding: 15.467vw 0;

    .content-block-lg, .content-block-md, .solution__title {
      padding: 0 12px 0 15px;
    }
  }

  .solution__content:nth-of-type(1) {
    padding-top: 14.133vw;
  }

  .solution__content:nth-of-type(4), .solution__content:nth-of-type(10) {
    text-align: left;

    .solution__img {
      width: 57.867vw;
      margin-left: 15px;
    }
  }

  .solution__content:nth-of-type(6), .solution__content:nth-of-type(12), .solution__content:nth-of-type(14) {
    .solution__img {
      width: calc(100% - 27px);
      margin: 14.133vw 12px 14.133vw 15px;
    }
  }

  .solution__color-container {
    margin: 15.467vw 0;
    padding: 15.467vw 12px 15.467vw 15px;
  }

  .solution__content--color.solution__content--color {
    padding: 0;
  }

  .solution__content--color:nth-of-type(2), .solution__content--color:nth-of-type(5) {
    margin-top: 14.133vw;
  }

  .solution__content--color:nth-of-type(3) .solution__img {
    width: 100%;
    margin: 14.133vw 0;
  }

  .delivered-features__container {
    gap: 2.667vw;
  }

  .delivered-features__list:nth-child(1) .delivered-features__item:last-child {
    width: auto;
  }

  .technology-stack__item:first-child {
    grid-row: span 2;
  }

  .technology-stack__img {
    width: 69.067vw;
    height: 90.933vw;
  }
}