/* v350G — Main services line-art tuned to match the user's sample ratio.
   Goal: keep the artwork clearly visible, slightly tucked behind the 4 cards,
   but not too far away and not so high that it nearly disappears. */

.home-page .home-service-routes{
  padding-bottom: clamp(52px, 6vw, 88px) !important;
}

.home-page .home-service-routes::before{
  left: 50% !important;
  bottom: clamp(-10px, -0.4vw, -2px) !important;
  width: min(90vw, 1540px) !important;
  height: clamp(215px, 18vw, 305px) !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(215px, 18vw, 305px) !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,.12) 45%,
    rgba(255,255,255,.62) 100%) !important;
}

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

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

  .home-page .home-service-routes::before{
    width: 94vw !important;
    height: clamp(175px, 20vw, 235px) !important;
    bottom: -8px !important;
    opacity: .67 !important;
  }

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

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

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

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