/* Below 1200px the services block used a Swiper; stack/wrap so every service is visible. */

@media screen and (max-width: 1199px) {
  .main-services-swiper.swiper-container,
  .main-services-swiper .swiper-wrapper {
    overflow: visible !important;
    transform: none !important;
  }

  .main-services-swiper.swiper-container {
    margin-bottom: 30px;
  }

  .main-services-swiper .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    height: auto;
  }

  .main-services-swiper .swiper-slide,
  .main-services-swiper-block {
    box-sizing: border-box;
    max-width: calc(50% - 8px);
    width: calc(50% - 8px);
    flex: 0 0 calc(50% - 8px);
    height: auto;
  }

  .main-services .navigation,
  .swiper-scrollbar-main-services {
    display: none !important;
  }
}

@media screen and (max-width: 575px) {
  .main-services-swiper .swiper-wrapper {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
  }

  .main-services-swiper .swiper-slide,
  .main-services-swiper-block {
    max-width: 100%;
    width: 100%;
    flex: 0 0 auto;
  }
}