.services {
  position: relative;
}

.services__content {
  padding: 0px 1rem 48px;
  background-color: var(--primary);
  background-color: transparent;
  background-image: linear-gradient(180deg, #000000 0%, #ffffff00 100%);
  border-radius: 20px;
}

.services__content h2 {
  text-align: center;
  width: 70%;
  margin: 0 auto 40px;
}

.services__cards {
  display: grid;
  gap: 20px;
  color: black;
}

.services__card {
  padding: 20px;
  background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(230, 230, 230) 100%);
  border: 1px solid rgb(219, 219, 219);
  border-radius: 14px;
}

.services__card__image {
  width: 100%;
  border-radius: 15px;
  border: 1px solid rgb(145, 144, 144);
}

.services__card__content {
  margin-top: 20px;
}

.services__card__content__title {
  text-transform: uppercase;
  font-size: 16.9px;
  color: rgb(31, 31, 31);
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .services {
    padding-top: 20px;
  }

  .services__content h2 {
    max-width: 38%;
  }

  .services__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 10px;
  }

  .services__card {
    padding: 33px;
  }

  .services__card__content__title {
    font-size: 20px;
  }
}