@media (min-width: 768px) and (max-width: 1024px) {
  .section-container {
    padding-inline: 32px;
  }

  .hero {
    background: url("../img/hero-vector.png") bottom center no-repeat,
      url("../img/hero-bg.webp") 30% 50% / cover no-repeat, #f5f2ed;
  }

  .hero-pd {
    padding-top: 158px;
    padding-bottom: 175px;
  }

  .services-pd {
    padding-top: 105px;
    padding-bottom: 95px;
  }

  .grid-section {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-item {
    margin-top: 50px;
  }

  .about-pd {
    padding-top: 105px;
    padding-bottom: 105px;
  }

  .contacts-pd {
    padding-top: 95px;
    padding-bottom: 95px;
  }

  .contacts__card--right {
    background-color: var(--bg-light);
    padding: 52px 70px;
  }

  .contacts__card-title {
    font-size: 38px;
    line-height: 50px;
  }

  .terms__title {
    font-size: 38px;
    line-height: 50px;
  }
}