@import url("../../assets/css/swiper.min.css");
@import url("../../assets/css/cases.css");

:root {
  --general-color: #00AB55;
  --cursor-color: #2DE98A;
}

.process__img:first-of-type {
  top: 4.318vh;
  left: 107.386vh;
}

.process__img:last-of-type {
  height: 34.545vh;
  left: 72.273vh;
}

.task {
  padding: 0 11.705vh 0 30.682vh;
  display: flex;
}

.task-content, .integration-content {
  width: 96.023vh;
}

.task-content__title, .integration-content__title {
  margin-bottom: 2.727vh;
}

.task-img, .integration-img {
  display: flex;
}

.task-content__list.paragraph-lg, .integration-content__list.paragraph-lg {
  margin-top: 1.818vh;
}

.task-content__item:not(:last-child), .integration-content__item:not(:last-child) {
  margin-bottom: 1.136vh;
}

.task-content:nth-of-type(1) {
  margin: auto 15.341vh auto 0;
}

.task-img-1 {
  height: 57.273vh;
  margin: 30.455vh 0 auto;
}

.task-content:nth-of-type(3) {
  margin: 14.659vh 15.341vh auto;
}

.task-img-2 {
  margin: 9.545vh 0 auto;
  height: 83.182vh;
}

.integration-content__title {
  margin-bottom: 2.727vh;
}

.integration-content:nth-of-type(1) {
  margin: auto 15.341vh auto 0;
}

.integration-image {
  display: flex;
}

.integration-img-1 {
  height: 66.25vh;
}

.integration-img-2 {
  height: 52.273vh;
  margin: 29.773vh 0 auto 1.818vh;
}

.integration-content:nth-of-type(3) {
  margin: 15.909vh 30.682vh auto 15.341vh;
}

.integration-img-3 {
  height: 100vh;
}

.integration-content:nth-of-type(4) {
  margin: 14.205vh 0 0 30.682vh;
}

.integration-content:nth-of-type(5) {
  margin: auto 0 14.205vh 30.682vh;
}

.integration-content:nth-of-type(6) {
  margin: auto 0 14.205vh 15.341vh;
}

.tech-stack-img {
  width: 97.614vh;
  align-self: flex-end;
}

.tech-stack-scheme {
  width: 55.682vh;
  align-self: center;
}

.communication-img {
  height: 69.205vh;
  width: auto;
}

.result-img {
  height: 100%;
  width: auto;
}

@media (max-width: 1280px) {
  .process__img:first-of-type {
    order: 1;
    margin: 1.823vw 8.594vw 0 auto;
    width: 40.625vw;
    height: auto;
  }

  .process__img:last-of-type {
    order: 0;
    margin: 11.979vw 0 0 0;
    width: 30.338vw;
    height: 30.338vw;
  }

  .task, .integration {
    padding: 10.156vw 0;
    flex-direction: column;
  }

  .task-content.task-content, .integration-content.integration-content {
    width: 100%;
    margin: 10.156vw 0 0;
    padding: 0 10.156vw;
  }

  .task-content:first-child, .integration-content:first-child {
    margin-top: 0;
  }

  .task-content__title, .integration-content__title {
    margin-bottom: 2.604vw;
  }

  .task-content__list.paragraph-lg, .integration-content__list.paragraph-lg {
    margin-top: 2.083vw;
  }

  .task-content__item:not(:last-child), .integration-content__item:not(:last-child) {
    margin-bottom: 1.302vw;
  }

  .task-img {
    margin: 9.635vw 0 0;
  }

  .task-img-1, .task-img-2 {
    margin: 0 auto;
    height: auto;
  }

  .task-img-1 {
    width: 81.12vw;
  }

  .task-img-2 {
    width: 100vw;
  }

  .integration-image {
    width: 98.047vw;
    margin: 10.156vw auto 0;
    flex-wrap: wrap;
  }

  .integration-img-1 {
    width: 50.781vw;
    height: 50.13vw;
    object-fit: cover;
  }

  .integration-img-2 {
    width: 37.109vw;
    height: 30.469vw;
    object-fit: cover;
    margin: auto 0 0 auto;
  }

  .integration-img-3 {
    width: 51.693vw;
    height: 49.74vw;
    object-fit: cover;
    margin: 10.156vw auto 0 0;
  }

  .tech-stack-img {
    width: 81.38vw;
    margin: 0;
  }

  .tech-stack-scheme.technology-stack__img {
    margin: 10.156vw auto 0 10.156vw;

    img {
      width: 63.802vw;
    }
  }

  .communication-img {
    height: auto;
    width: 69.531vw;
  }

  .result-img {
    height: auto;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .process__img:first-of-type {
    margin: 15.467vw 0 0 auto;
    width: 61.6vw;
  }

  .process__img:last-of-type {
    margin: 0;
    width: 46.4vw;
    height: 46.4vw;
  }

  .task, .integration {
    padding: 15.467vw 0;
  }

  .task-content.task-content, .task__img {
    margin: 14.133vw 0 0;
    padding: 0 12px 0 15px;
  }

  .task-content:first-child, .integration-conten:first-child {
    margin-top: 0;
  }

  .task-content__title, .integration-content__title {
    margin-bottom: 5.333vw;
  }

  .task-content__list.paragraph-lg, .integration-content__list.paragraph-lg {
    margin-top: 4.267vw;
  }

  .task-content__item:not(:last-child), .integration-content__item:not(:last-child) {
    margin-bottom: 2.667vw;
  }

  .task-content__title, .integration-content__title {
    margin-bottom: 6.4vw;
  }

  .task-content__list {
    margin-top: 4.267vw;
  }

  .task-img {
    margin: 14.133vw 0 0;
  }

  .task-img-1 {
    width: calc(100% - 27px);
    margin-left: 15px;
  }

  .task-img-2 {
    width: 100%;
  }

  .integration-content.integration-content {
    margin: 15.467vw 0 0;
    padding: 0 12px 0 15px;
  }

  .integration-content:first-child {
    margin-top: 0;
  }

  .integration-image {
    width: auto;
    margin: 15.467vw auto 0;
  }

  .integration-img-1 {
    width: 77.6vw;
    height: 66.667vw;
    object-fit: cover;
  }

  .integration-img-2 {
    width: 77.333vw;
    height: 77.333vw;
    object-fit: cover;
    margin: 15.467vw 0 11.2vw auto;
  }

  .integration-img-3 {
    width: 100%;
    height: 101.867vw;
    margin-top: 15.467vw;
  }

  .tech-stack-img {
    margin: 0 12px 0 15px;
    width: calc(100% - 27px);
  }

  .tech-stack-scheme.technology-stack__img {
    margin: 15.467vw 12px 0 15px;

    img {
      width: 100%;
    }
  }

  .communication-img {
    width: 69.067vw;
    transform: translateX(calc(100vw - 100%));
  }
}