ecommerce.scss

.ecommerce {
  &__main {
    background-image: linear-gradient(135deg, $black_sea, $main-violet);

    .list-with-images.horizontal .list-with-images__item {
      &:nth-child(-n+2) {
        max-width: 37%;
        width: 37%;
      }
      &:first-child { margin-left: 13%; }
      &:nth-child(2) { margin-right: 13%; }
    }
  }

  .development__cards .cards-container {
    justify-content: space-around;
    margin-bottom: 60px;

    .card {
      max-width: 410px;
      background: rgba($white, .05);
      box-shadow: $main-shadow;
      margin: 5px;
      &__description { margin: 0; }

      &__icon {
        background-color: $white;
        border-radius: 50%;
        box-shadow: $main-shadow;
        display: flex;
        height: 125px;
        margin: 0 auto 20px auto;
        width: 125px;

        img {
          mix-blend-mode: luminosity;
          width: 90px;
          height: 90px;
          padding: 18px;
        }
      }
    }
  }

  &__help {
    background: $titan_white;
  }

  .solutions_cases__case_study {
    box-shadow: inset 0px 4px 25px 0px rgba($purple-heart, .25);
    &_image img { max-width: 250px; }
  }

  &__project {
    background-image: linear-gradient(to top left, $purple-heart, $black_sea);
    box-shadow: $light-purple-shadow;
    .purple-text { color: $buzok; }

    .list-with-images {
      &__item {
        margin-bottom: 80px;
        align-items: flex-start;
      }
    }

    .button {
      border-color: transparent;
      box-shadow: $light-purple-shadow;
      color: $white;
      font-weight: 400;
      margin-top: 0;
    }
  }
}

@media screen and (max-width: 659px) {
  .ecommerce {
    .list-with-images.horizontal .list-with-images__item {
      &:first-child,
      &:nth-child(2) { margin: 1vh 0; }
    }
  }
}

@media screen and (max-width: 767px) {
  .ecommerce {
    .list-with-images.horizontal .list-with-images__item {
      max-width: 200px;

      &:nth-child(-n+2) {
        max-width: 200px;
        width: 100%;
      }
    }

    .solutions_cases__case_study {
      box-shadow: inset 0px 14px 25px -15px rgba($purple-heart, .25);
      &_image img { max-width: 140px; }
    }
    &__main { .list-with-images.horizontal .list-with-images__item { margin-top: 1vh; } }

    &__project {

      .list-with-images {
        &__item {
          margin-bottom: 40px;
          &-text { margin-top: 23px; }
        }
      }
    }
  }
}