/* v353G — Increase the overall Main services section height,
   not the card height. The 4 service cards stay in the upper area,
   while more of the landmark line-art becomes visible underneath. */

.home-page .home-service-routes{
  padding-bottom: clamp(150px, 13vw, 230px) !important;
}

.home-page .home-service-routes::before{
  left: 50% !important;
  bottom: clamp(-6px, -0.25vw, 0px) !important;
  width: min(90vw, 1540px) !important;
  height: clamp(235px, 18.5vw, 320px) !important;
  transform: translateX(-50%) !important;
  background-position: center bottom !important;
  background-size: 100% auto !important;
  opacity: .73 !important;
}

.home-page .home-service-routes::after{
  left: 50% !important;
  bottom: 0 !important;
  width: min(90vw, 1540px) !important;
  height: clamp(235px, 18.5vw, 320px) !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.03) 18%,
    rgba(255,255,255,.14) 46%,
    rgba(255,255,255,.64) 100%) !important;
}

.home-page .home-service-routes .home-route-grid{
  margin-bottom: 0 !important;
}

@media (max-width: 1200px){
  .home-page .home-service-routes{
    padding-bottom: clamp(125px, 12vw, 190px) !important;
  }

  .home-page .home-service-routes::before,
  .home-page .home-service-routes::after{
    height: clamp(205px, 19vw, 275px) !important;
  }
}

@media (max-width: 980px){
  .home-page .home-service-routes{
    padding-bottom: clamp(95px, 12vw, 145px) !important;
  }

  .home-page .home-service-routes::before,
  .home-page .home-service-routes::after{
    width: 94vw !important;
    height: clamp(170px, 20vw, 225px) !important;
  }
}

@media (max-width: 640px){
  .home-page .home-service-routes{
    padding-bottom: clamp(46px, 9vw, 72px) !important;
  }

  .home-page .home-service-routes::before,
  .home-page .home-service-routes::after{
    width: 96vw !important;
    height: clamp(120px, 28vw, 156px) !important;
  }
}