@media (max-width: 991.98px) {
  .section {
    padding: 3.5rem 0;
  }
  .hero {
    padding: 3rem 0;
  }
  .site-header .nav-link.active {
    box-shadow: none;
  }
  .site-header .navbar-collapse {
    padding-bottom: 1rem;
  }
  .site-header .btn {
    width: 100%;
    margin-top: 0.5rem;
  }
}
@media (max-width: 575.98px) {
  .hero-plate {
    grid-template-columns: 1fr 1fr;
  }
  .btn {
    width: 100%;
  }
  .hero .btn + .btn {
    margin-top: 0.5rem;
  }
  .site-header .navbar-brand img {
    height: 38px;
  }
}

/* phones and small tablets: lighter background images */
@media (max-width: 768px) {
  .hero {
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.62) 100%), url("../images/banners/home-banner-md.jpg");
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.62) 100%), image-set(url("../images/banners/home-banner-md.webp") type("image/webp"), url("../images/banners/home-banner-md.jpg") type("image/jpeg"));
    background-size: 40px 40px, 40px 40px, cover, cover;
    background-position: 0 0, 0 0, center, center 45%;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
  }
  .page-banner.banner-about {
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), url("../images/banners/about-banner-md.jpg");
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), image-set(url("../images/banners/about-banner-md.webp") type("image/webp"), url("../images/banners/about-banner-md.jpg") type("image/jpeg"));
    background-position: center 40%;
  }
  .page-banner.banner-products {
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), url("../images/banners/products-banner-md.jpg");
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), image-set(url("../images/banners/products-banner-md.webp") type("image/webp"), url("../images/banners/products-banner-md.jpg") type("image/jpeg"));
    background-position: center 55%;
  }
  .page-banner.banner-services {
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), url("../images/banners/services-banner-md.jpg");
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), image-set(url("../images/banners/services-banner-md.webp") type("image/webp"), url("../images/banners/services-banner-md.jpg") type("image/jpeg"));
    background-position: center 45%;
  }
  .page-banner.banner-projects {
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), url("../images/banners/projects-banner-md.jpg");
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), image-set(url("../images/banners/projects-banner-md.webp") type("image/webp"), url("../images/banners/projects-banner-md.jpg") type("image/jpeg"));
    background-position: center 50%;
  }
  .page-banner.banner-gallery {
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), url("../images/banners/gallery-banner-md.jpg");
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), image-set(url("../images/banners/gallery-banner-md.webp") type("image/webp"), url("../images/banners/gallery-banner-md.jpg") type("image/jpeg"));
    background-position: center 50%;
  }
  .page-banner.banner-contact {
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), url("../images/banners/cta-banner-md.jpg");
    background-image: linear-gradient(90deg, rgba(12, 35, 64, 0.92) 0%, rgba(12, 35, 64, 0.78) 55%, rgba(12, 35, 64, 0.6) 100%), image-set(url("../images/banners/cta-banner-md.webp") type("image/webp"), url("../images/banners/cta-banner-md.jpg") type("image/jpeg"));
    background-position: center 40%;
  }
  .cta-band {
    background-image: linear-gradient(90deg, rgba(27, 116, 209, 0.94) 0%, rgba(12, 35, 64, 0.88) 100%), url("../images/banners/cta-banner-md.jpg");
    background-image: linear-gradient(90deg, rgba(27, 116, 209, 0.94) 0%, rgba(12, 35, 64, 0.88) 100%), image-set(url("../images/banners/cta-banner-md.webp") type("image/webp"), url("../images/banners/cta-banner-md.jpg") type("image/jpeg"));
    background-position: center 40%;
  }
}
@media (max-width: 575.98px) {
  .page-banner { padding: 2.25rem 0; }
  .card-item .thumb img.fit-contain,
  .card-item .thumb img.fit-cutout { padding: 0.4rem; }
}

/* Bootstrap .row.g-5 gutters (-1.5rem) are wider than the container padding and added ~12px of sideways scroll on phones */
main { overflow-x: clip; }