@media (max-width: 991px) {
  .container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero {
    position: relative;
    min-height: 0;
    padding: 67px 0 320px;
    background:
      linear-gradient(rgba(51, 54, 57, 0.35), rgba(51, 54, 57, 0.35)),
      url('../../images/pages/services/mobile/hero-mobile.webp') center/cover no-repeat;
  }

  .hero-main {
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .hero h1 {
    font-size: 48px;
    line-height: normal;
    margin-bottom: 20px;
  }

  .hero p {
    font-size: 19px;
    line-height: normal;
  }

  .hero-pills { display: none; }

  .services-group {
    padding-top: 137px;
  }

  .services-group:last-of-type {
    padding-bottom: 177px;
  }

  .group-intro {
    margin: 0 0 40px;
    text-align: left;
    max-width: none;
  }

  .group-intro h2 {
    font-size: 40px;
    line-height: normal;
    margin-top: 20px;
  }

  .service-card {
    height: auto;
    margin-bottom: 137px;
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .service-image {
    position: static;
    width: 100%;
    max-width: none;
    height: 400px;
    --service-image-scale: 1;
    --service-image-y: 0px;
  }

  .service-image::before {
    inset: 0;
    transform: none;
    will-change: auto;
  }

  .service-content {
    position: relative;
    width: calc(100% - 40px);
    max-width: none;
    min-height: 0;
    margin: -96px 20px 0;
    padding: 16px 20px 24px;
    background: var(--surface);
  }

  .service-content::before,
  .service-card.reverse .service-content::before {
    display: block;
    left: 0;
    right: auto;
    top: -40px;
    width: 100%;
    height: 40px;
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
  }

  .service-content h3 {
    font-size: 28px;
    line-height: normal;
    margin-bottom: 20px;
  }

  .service-content p {
    font-size: 19px;
    line-height: normal;
    margin-bottom: 24px;
    max-width: 100%;
  }

}