.services {
  padding-top: 80px;
  margin-top: 30px;
}

.services__title {
  margin-bottom: 52px;
}

.services__list {
  display: flex;
  margin: 0 -15px;
  flex-wrap: wrap;
}

.services__item {
  padding: 0 0 20px;
  flex: 0 0 calc(100% / 3 - 30px);
  margin: 0 15px 30px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--main-border-color);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition-property: background-color, border-color;
  transition-duration: .1s;
  transition-timing-function: linear;
  background-color: var(--main-background-color);
}

.services__item:hover {
  border-color: var(--hover-border-color);
  background-color: var(--light-background-active-color);
}

.services__image {
  margin-top: -1px;
  margin-bottom: 20px;
  width: 100%;
  user-select: none;
}

.services__subtitle {
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  margin: 0 24px;
  transition: color .1s linear;
}

.services__item:hover .services__subtitle {
  color: var(--hover-text-color);
}



@media screen and (max-width: 768px) and (min-width: 681px) {
  .services__item {
    flex: 0 0 calc(50% - 30px);
  }
}

@media screen and (max-width: 680px) {
  .services {
    padding-top: 62px;
    margin-top: 28px;
    overflow: hidden;
  }

  .services__title {
    margin-bottom: 24px;
  }

  .services__list {
    flex-wrap: nowrap;
    margin: 0 -16px;
    padding: 0 16px;
  }

  .services__item {
    margin: 0;
    flex: 0 0 calc(100% - 40px);
  }

  .services__item:not(:last-child) {
    margin-right: 16px;
  }

  .services__item:hover {
    border-color: var(--main-border-color);
    background-color: var(--main-background-color);
  }

  .services__item:hover .services__subtitle {
    color: var(--main-text-color);
  }
}