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

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

@media (min-width: 1281px) {
  .preview__title {
    font-size: 11.364vh;
  }
}

.process__img {
  height: 38.068vh;
}

.process__img--tablet {
  display: none;
}

.process__img--desktop:nth-of-type(1) {
  right: 0;
}

.process__img--desktop:nth-of-type(2) {
  left: -2.5vh;
}

.challenge__content:nth-of-type(1) {
  padding-top: 15.341vh;
  width: unset;

  .challenge__text {
    width: 61.364vh;
  }

  .challenge__text:nth-of-type(2) {
    margin-top: 21.25vh;
    margin-left: 46.023vh;
  }
}

.challenge__img-container {
  display: flex;
  align-items: flex-start;
}

.challenge__img:nth-of-type(1) img {
  width: 61.364vh;
  height: auto;
}

.challenge__img:nth-of-type(2) img {
  width: 92.045vh;
  height: 100vh;
  object-fit: cover;
}

.features {
  align-items: center;
}

.features__content:not(:first-child) {
  margin-left: 15.341vh;
}

.features__content:nth-of-type(1), .features__content:nth-of-type(2) .features__img {
  width: 76.705vh;
}

.features__content:nth-of-type(3) {
  width: 61.364vh;
}

.features__content:nth-of-type(4) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-self: flex-start;
  gap: 3.409vh;
  width: 95vh;

  .features__img:nth-of-type(1) {
    width: 77.386vh;
  }

  .features__img:nth-of-type(2) {
    width: 61.364vh;
    margin-left: 3.409vh;
  }

  .features__img:nth-of-type(3) {
    width: 26.705vh;
    margin-top: 3.409vh;
  }
}

.features__content:nth-of-type(5) {
  width: 46.023vh;
  margin-bottom: 38.636vh;
}

.features__content:nth-of-type(6) {
  width: 46.023vh;
  margin-left: 0;
  margin-top: 13.636vh;
}

.features__img {
  height: auto;
}

.delivered-features-container {
  display: flex;
  overflow: hidden;
}

.screen-img-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 3.409vh
}

.delivered-features-img {
  width: 94.773vh;
  align-items: flex-end;
  padding-top: 10.227vh;
  margin-right: -5.682vh;

  img {
    width: 29.318vh;
    height: auto;
    object-fit: cover;
    object-position: center top;
  }

  img:nth-of-type(1) {
    transform: translateY(6.818vh);
  }

  img:nth-of-type(3) {
    transform: translateY(3.409vh);
  }

  img:nth-of-type(4) {
    height: 27.841vh;
  }

  img:nth-of-type(5) {
    height: 34.545vh;
  }

  img:nth-of-type(6) {
    height: 31.25vh;
  }
}

.delivered-features {
  z-index: 2;
}

.delivered-features__content {
  width: 72.727vh;
}

.communication-img, .tech-stack-img {
  img {
    width: 76.705vh;
    height: auto;
  }
}

.technology-stack__img {
  margin-top: auto;
}

.result {
  background: transparent;
  color: var(--black);
}

.result-img {
  position: relative;
  padding: 0 29.432vh 3.409vh 26.477vh;
  background-color: #F0F0F0;
}

.result-img__img:nth-of-type(1) {
  width: 61.136vh;
  height: auto;
}

.result-img__img:nth-of-type(2), .result-img__img:nth-of-type(3) {
  width: 29.318vh;
  height: auto;
  position: absolute;
  left: 6.581vh;
}

.result-img__img:nth-of-type(2) {
  top: 9.886vh;
}

.result-img__img:nth-of-type(3) {
  top: 64.773vh;
}

.result-img__review {
  position: absolute;
  width: 43.997vh;
}

.result-img__review:nth-of-type(1) {
  top: 15.455vh;
  right: 6.581vh;
}

.result-img__review:nth-of-type(2) {
  top: 61.023vh;
  right: 16.25vh;
}

.result-review {
  padding: 3.977vh;
  background: #fafafa;
}

.result-review__head {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  height: 6.136vh;
  gap: 0;
}

.result-review__photo {
  width: 5.455vh;
  height: 5.455vh;
  margin: auto 2.273vh auto 0;
}

.result-review__rating {
  display: flex;
  gap: 0.682vh;

  li {
    width: 2.955vh;
    height: 2.955vh;

    svg {
      width: 100%;
      height: auto;
    }
  }
}

.result-review__name {
  color: rgba(0, 0, 0, .5);
  font: 400 1.818vh/1.35 var(--font);
}

.result-review__text {
  margin-top: 2.273vh;
}

@media (max-width: 1280px) {
  .process__img--desktop {
    display: none;
  }

  .process__img--tablet {
    display: block;
    width: 68.75vw;
    height: auto;
    margin-left: auto;
  }

  .challenge, .features {
    padding: 0;
  }

  .challenge__content.challenge__content, .features__content.features__content {
    width: 100%;
    padding: 10.156vw 6.51vw 0 10.156vw;
  }

  .challenge__content:nth-of-type(1) {
    .challenge__text {
      width: auto;
    }

    .challenge__text:nth-of-type(2) {
      margin: 1.042vw 0 0 7.552vw;
    }
  }

  .challenge__img-container {
    padding: 10.156vw 3.125vw 0;
    justify-content: space-between;
  }

  .challenge__img.challenge__img {
    margin: 0;

    img {
      width: 45.574vw;
      height: auto;
    }
  }

  .challenge__img:nth-of-type(2) img {
    margin: 2.604vw 0 0 2.604vw;;
  }

  .features {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .features__content:not(:first-child) {
    width: auto;
    margin: 0;
  }

  .features__content:nth-of-type(2) {
    order: 3;
    padding: 10.156vw 10.938vw 0;
    margin-left: auto;

    .features__img {
      width: 54.948vw;
    }
  }

  .features__content:nth-of-type(3) {
    order: 2;
    padding-top: 1.042vw;

    .features__text {
      padding-left: 7.552vw;
    }
  }

  .features__content:nth-of-type(4) {
    order: 5;
    padding: 0 3.125vw 0 0;
    justify-content: flex-end;
    gap: 0;
    margin-top: -3.646vw;

    .features__img:nth-of-type(1) {
      order: 3;
      width: 41.667vw;
      margin: 2.604vw 0 0 3.125vw;
    }

    .features__img:nth-of-type(2) {
      order: 2;
      width: 32.161vw;
    }

    .features__img:nth-of-type(3) {
      order: 1;
      width: 20.833vw;
      margin-left: 65.885vw;
    }
  }

  .features__content:nth-of-type(5) {
    order: 4;

    .features__text {
      width: 52.344vw;
      padding-left: 7.813vw;
    }
  }

  .features__content:nth-of-type(6) {
    order: 6;
    padding: 6.25vw 6.25vw 10.156vw 38.932vw
  }

  .delivered-features-container {
    flex-direction: column-reverse;
    background-color: var(--general-color);
  }

  .delivered-features__content {
    width: 100%;
  }

  .screen-img-container {
    gap: 2.583vw;
  }

  .delivered-features-img {
    width: 100%;
    height: 85.547vw;
    padding: 0 3.125vw;
    margin-right: 0;

    img {
      width: 29.443vw;
    }

    img:nth-of-type(1) {
      transform: translateY(3.906vw);
    }

    img:nth-of-type(2) {
      transform: translateY(7.684vw);
    }

    img:nth-of-type(3) {
      transform: none;
    }

    img:nth-of-type(4) {
      height: 27.133vw;
    }

    img:nth-of-type(5) {
      height: 23.227vw;
    }

    img:nth-of-type(6) {
      height: 31.039vw;
    }
  }

  .communication-img, .tech-stack-img {
    img {
      width: 68.75vw;
    }
  }

  .communication-img {
    text-align: right;
  }

  .technology-stack__img {
    margin-left: auto;
  }

  .result-img {
    padding: 98.047vw 0 0;
    margin-top: 41.797vw;
  }

  .result-img__img:nth-of-type(1) {
    width: 42.578vw;
    position: absolute;
    top: -41.797vw;
    right: 29.427vw;
  }

  .result-img__img:nth-of-type(2), .result-img__img:nth-of-type(3) {
    width: 20.573vw;
    left: unset;
    right: 6.25vw;
  }

  .result-img__img:nth-of-type(2) {
    top: -23.698vw;
  }

  .result-img__img:nth-of-type(3) {
    top: 15.104vw;
  }

  .result-img__review:nth-of-type(1), .result-img__review:nth-of-type(2) {
    width: 50.381vw;
  }

  .result-img__review:nth-of-type(1) {
    top: 63.021vw;
    right: 6.51vw;
  }

  .result-img__review:nth-of-type(2) {
    top: 31.901vw;
    right: 39.844vw;
  }

  .result-review {
    padding: 4.557vw;
  }

  .result-review__head {
    height: 6.64vw;
  }

  .result-review__photo {
    width: 6.25vw;
    height: 6.25vw;
    margin-right: 2.604vw;
  }

  .result-review__rating {
    gap: 0.781vw;

    li {
      width: 3.385vw;
      height: 3.385vw;
    }
  }

  .result-review__name {
    font-size: 1.823vw;
  }

  .result-review__text {
    margin-top: 2.604vw;
  }
}

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

  .challenge__content.challenge__content, .features__content.features__content {
    padding: 15.467vw 12px 0 15px;
  }

  .challenge__content:nth-of-type(1) {
    .challenge__text:nth-of-type(2) {
      margin: 2.133vw 0 0 6.4vw;
    }
  }

  .challenge__img-container {
    padding: 15.467vw 12px 0 15px;
    flex-direction: column;

    .challenge__img {
      width: auto;

      img {
        width: 84.267vw;
      }
    }

    .challenge__img:nth-of-type(1) {
      margin-left: auto;
    }

    .challenge__img:nth-of-type(2) img {
      margin: 6.4vw auto 0 0;
    }
  }

  .features {
    padding-bottom: 15.467vw;
  }

  .features__content:nth-of-type(2) {
    margin:  0 auto;

    .features__img  {
      width: 73.333vw;
    }
  }

  .features__content:nth-of-type(3) {
    padding-top: 2.133vw;

    .features__text {
      padding-left: 6.4vw;
    }
  }

  .features__content:nth-of-type(5) {
    .features__text {
      width: auto;
      padding-left: 0;
    }
  }

  .features__content:nth-of-type(4) {
    margin-top: 0;

    .features__img:nth-of-type(1) {
      order: 3;
      width: 76vw;
      margin: 0;
    }

    .features__img:nth-of-type(2) {
      order: 1;
      width: 52.8vw;
      margin: 0 0 0 -1px;
    }

    .features__img:nth-of-type(3) {
      order: 2;
      width: 37.6vw;
      margin: 8vw 0 2.667vw 2.667vw;
    }
  }

  .delivered-features-img {
    height: unset;
    padding: 0 12px 0 15px;
    justify-content: space-between;
    gap: 2.667vw;

    img {
      width: 44.445vw;
    }

    img:not(:nth-of-type(2)) {
      transform: none;
    }

    img:nth-of-type(2) {
      transform: translateY(5.701vw);
    }

    img:nth-of-type(4) {
      height: 39.765vw;
    }

    img:nth-of-type(5) {
      height: 71.733vw;
      order: 2;
    }

    img:nth-of-type(6) {
      height: 40.291vw;
    }

    img:nth-of-type(4), img:nth-of-type(6) {
      order: 3;
    }
  }

  .communication-img img, .tech-stack-img img {
    width: 100%;
  }

  .result-img {
    padding: 15.467vw 12px 15.467vw 15px;
  }

  .technology-stack__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .technology-stack__item {
    width: 46.4vw;

    &:nth-child(1) {
      grid-row: span 2;
    }
  }

  .result-img {
    margin-top: 112vw;
  }

  .result-img__img:nth-of-type(1) {
    width: 61.067vw;
    top: -112vw;
    right: 35.2vw;
  }

  .result-img__img:nth-of-type(2), .result-img__img:nth-of-type(3) {
    width: 29.333vw;
    right: 12px;
  }

  .result-img__img:nth-of-type(2) {
    top: -106.667vw;
  }

  .result-img__img:nth-of-type(3) {
    top: -51.467vw;
  }

  .result-img__review.result-img__review {
    position: static;
    width: 92.8vw;
    margin: 0 auto;
  }

  .result-img__review:nth-of-type(2) {
    margin-top: 6.4vw;
  }

  .result-review {
    padding: 9.333vw;
  }

  .result-review__head {
    height: 13.6vw;
  }

  .result-review__photo {
    width: 12.8vw;
    height: 12.8vw;
    margin-right: 5.333vw;
  }

  .result-review__rating {
    gap: 1.6vw;

    li {
      width: 6.933vw;
      height: 6.933vw;
    }
  }

  .result-review__name {
    font-size: 3.733vw;
  }

  .result-review__text {
    margin-top: 5.333vw;
  }
}