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

:root {
  --general-color: #4CB333;
  --cursor-color: #61E242;
}

picture {
  img {
    height: 100%;
    width: auto;
  }
}

.case-cover picture {
  height: 100vh;

  img {
    height: 100%;
  }
}

.process__img {
  height: 30.68vh;
  left: 47.39vh;
  top: 0;
}

.process__img + .process__img {
  height: 42.05vh;
  left: 74.89vh;
}

.challenge {
  padding: 0 30.68vh 0 15.34vh;
}

.challenge__content {
  padding-top: 37.27vh;
  width: 76.7vh;
  margin-left: 15.34vh;
}

.challenge__img {
  margin-left: 15.34vh;
  height: 76.7vh;
}

.challenge__title {
  font-size: 16vh;
}

.solution {
  padding: 0 30.682vh 0 0;
  gap: 15.34vh;
}

.solution-content {
  margin-left: 0;

  > p {
    padding-left: 0;
  }

  &:nth-of-type(1) {
    margin-top: 44.89vh;
  }

  &:nth-of-type(2) {
    margin-top: 20.91vh;
  }

  &:nth-of-type(3) {
    margin-top: 30.8vh;
  }

  &:nth-of-type(4) {
    margin-top: 52.39vh;
  }

  &:nth-of-type(5) {
    margin-top: 37.39vh;
  }

  &:nth-of-type(6) {
    margin-top: 56.02vh;
  }

  &:nth-of-type(7) {
    margin-top: 44.2vh;
  }

  &:nth-of-type(2), &:nth-of-type(3) {
    width: 92.05vh;
  }

  &:nth-of-type(1), &:nth-of-type(4), &:nth-of-type(5), &:nth-of-type(6), &:nth-of-type(7) {
    width: 76.7vh;
  }
}

.solution__img-1 {
  height: 79.43vh;
  margin: auto 0 0;
}

.solution__img-2 {
  height: 100vh;
}

.solution__img-3 {
  height: 59.2vh;
  margin: auto 0;
}

.delivered-features__list {
  width: 66.67vw;
  flex-wrap: wrap;
  height: 37.14vh;
  padding-left: 0;
}

.delivered-features__item {
  width: 62.5vh;
  margin-left: 10.23vh;
}

.technology-stack__img {
  height: 66.82vh;
  margin: 0;

  > img {
    height: 100%;
  }
}

.result {
  background: var(--general-color);

  * {
    color: var(--white);
  }
}

.result__text > a:hover {
  color: var(--black);
}

@media (max-width: 1280px) {
  picture {
    img {
      width: 100%;
      height: auto;
    }
  }

  .case-cover picture {
    height: auto;
    width: 100%;

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

  .process__img {
    width: 18.49vw;
    height: auto;
    margin: 0 8px 0 20vw;

    & + .process__img {
      width: 45.7vw;
      height: auto;
      margin: 0 24px 0 0;
    }
  }

  .challenge {
    padding: 10.68vw 0 7.55vw 20.31vw;
    position: relative;
  }

  .challenge__title, .solution__title {
    position: absolute;
    margin: 0;
    top: 7.55vw;
    left: 1.04vw;
  }

  .challenge__content {
    padding: 0 8.59vw 0 0;
    width: 100%;
    margin-left: 0;
  }

  .challenge__img {
    width: 69.53vw;
    height: auto;
    margin: 10.42vw 0 0 auto;
  }

  .vertical-title {
    top: 0;
  }

  .challenge__title {
    font-size: 9.115vw;
    top: 7.55vw;
  }

  .solution {
    padding: 0;
    gap: 0;
  }

  .solution-content {
    margin: 0 !important;
    width: 100% !important;

    > p {
      padding-right: 0;
    }

    &:nth-of-type(1) {
      padding: 3.13vw 8.59vw 0 20.31vw;
    }

    &:nth-of-type(2) {
      padding: 7.55vw 8.59vw 0 20.31vw;
    }

    &:nth-of-type(3) {
      padding: 7.55vw 8.59vw 0 10.16vw;
    }

    &:nth-of-type(4) {
      padding: 7.55vw 0 0 10.16vw;
      width: 81.25vw !important;
    }

    &:nth-of-type(5) {
      padding: 10.16vw 0 0 10.16vw;
      width: 81.25vw !important;
    }

    &:nth-of-type(6) {
      padding: 7.55vw 5.21vw 0 24.35vw;
    }

    &:nth-of-type(7) {
      padding: 7.55vw 8.59vw 10.16vw 10.16vw;
    }
  }

  .solution__img-1 {
    width: 89.84vw;
    height: auto;
    margin: 7.81vw 0 auto auto;
  }

  .solution__img-2 {
    width: 100%;
    height: auto;
    margin: 10.16vw 0 0;
  }

  .solution__img-3 {
    width: 79.56vw;
    height: auto;
    margin: 7.16vw auto 0;
  }

  .technology-stack__item {
    width: 27vw;
  }

  .technology-stack__img {
    width: 60.94vw;
    height: auto;
    margin: 0 0 0 auto;
  }

  .process {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
  }

  .delivered-features__list {
    width: 100%;
    height: auto;
  }

  .delivered-features__item {
    width: calc(100% - 10.23vh);
  }
}

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

  .process__img {
    width: 20.8vw;
    margin: 0 8px 0 0;

    & + .process__img {
      width: 51.73vw;
      margin: 0 12px 0 0;
    }
  }

  .challenge__content {
    padding: 14.13vw 0 14.13vw;
  }

  .challenge__title, .solution__title {
    position: static;
    margin-bottom: 0;
  }

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

  .challenge__text:not(.paragraph-lg) {
    padding-left: 0;
  }

  .challenge__img {
    width: 73.07vw;
    margin-top: 0;
  }

  .solution {
    gap: 14.13vw;
    display: flex;
    flex-direction: column;
    padding-bottom: 15.47vw;
  }

  .solution__title {
    margin-left: 15px;
  }

  .solution-content {
    padding: 0 12px 0 15px !important;

    &:nth-of-type(4), &:nth-of-type(5) {
      width: 100% !important;
    }
  }

  .solution__img-1, .solution__img-3 {
    margin: 0 auto 0 15px;
    width: calc(100% - 27px);
  }

  .solution__img-2 {
    margin: 0;
  }

  .delivered-features__list {
    flex-wrap: nowrap;
    height: auto;
  }

  .delivered-features__item {
    width: 100%;
    margin: 0;
  }

  .technology-stack__list {
    grid-template-rows: auto 1fr;
    grid-row-gap: 15.47vw;
  }

  .technology-stack__item {
    width: 100%;

    &:first-child {
      grid-row: 1/3;
    }
  }

  .technology-stack__img {
    width: 69.07vw;
  }
}