.c-service-blocks__title {
  text-align: center;
}

.c-service-block__grid {

  @include mq(700) {
    display: flex;
    max-width: 1200px;
    justify-content: flex-start;
    flex-wrap: wrap;

    margin: 0 auto -40px;
  }

  padding-top: 28px;
  padding-bottom: 40px;

  @include mq($max: 900) {
    margin: 0;
    padding-top: 0;
  }
}

.c-service-block {
  padding: 60px 30px;
  background: #FFFFFF;
  border-radius: 20px;
  min-height: 444px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 -10px 20px -15px rgba(137, 155, 191, 0.5), 0 10px 20px -15px rgba(104, 153, 252, 0.5), 0 20px 40px -10px rgba(104, 153, 252, 0.1);
  text-decoration: none;
  transform: translateY(0);
  transition: transform 0.2s, box-shadow 0.2s;

  @include mq($max: 700) {
    max-width: 340px;
    margin: 30px auto;
  }
  @include mq(700) {
    width: calc((100% - 20px * 4) / 2);
    margin: 20px;
  }

  @include mq(1180) {
    width: calc((100% - 30px * 6) / 3);
    max-width: 340px;
  }

  h3 {
    color: palette(text, 600);
  }
  p {
    text-align: center;
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(104, 153, 252, 0.5);
  }
}

.c-service-block--narrow {
  background: linear-gradient(180deg, #699BFF 0%, #2F6CE6 100%);
  color: white;
  width: 120px;
  display: flex;
  //flex-grow: 1;
  //flex-shrink: 1;
  //max-width: 400px;
  //min-width: 120px;
  text-align: center;
  text-transform: uppercase;
  //@include font(base, $weight: 500);

  @include mq(null, 1610) {
    width: 340px;
  }

  .c-button__icon {
    width: 19px;
    margin-top: 10px;
  }
}

.c-service-block__icon {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: none;
}

.c-button--ghost {
  color: palette(primary);
}

.c-service-block__subtitle {
  @include font-size(16, 21);
  color: palette(primary, 400);
}