@media only screen and (max-width: 1550px) {

  .content article {width: 80%;}

}

@media only screen and (max-width: 1350px) {

  :root {
    --font-size: 16px;
  }

  h5, footer .footer-column small {font-size: 12px; line-height: 14px; margin-bottom: 10px;}


  .menu > ul > li {margin: 0 15px;}
  .menu > ul > li a {padding: 15px 0;}

  .banner header .wrapper .logo {width: 250px;}

  .banner header .wrapper, .banner > .wrapper {grid-template-columns: 1fr 1fr;}
  .banner > .wrapper article {max-width: 30vw;}

  .content .grid figure {padding-bottom: 100%;}
  .content article {width: 100%;}

  footer .flex-row {gap: 5vw;}
  footer .footer-logo figure img {width: 200px;}
  footer .footer-column.footer-legal li p, footer .footer-column.footer-legal li a {font-size: 11px; line-height: 13px;}

}
@media only screen and (max-width: 1024px) {

  .nav-wrapper {display: none;}

  .banner header .wrapper, .banner > .wrapper { grid-template-columns: 1.5fr 1fr; }

  .why-us__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .why-us__item{ max-width:260px; }

}
@media only screen and (max-width: 900px) {

  :root {
    --font-size: 14px;
  }

  .mySwiper .swiper-slide a {padding-bottom: 70%;}
  .mySwiper .swiper-slide a h3 {bottom: 20px; left: 25px; font-size: 20px;}

  footer .footer-logo figure img { width: 150px; }

  .why-us__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .why-us__grid{ grid-template-columns:1fr; }

}
@media only screen and (max-width: 767px) {

  .banner header {top: 15px;}
  .banner header .wrapper .logo {width: 200px;}

  #sm_menu_ham { top: 23px !important; right: 20px !important;}
  #sm_menu_ham.open span {background: #fff;}
  .sm_menu_outer {top: 0px!important; height: 100dvh!important; background-color: var(--blue)!important; padding-top: 5px;}

  .grid {grid-template-columns: 1fr!important;}

  .banner .desktop {display: none;}
  .banner .mobile {display: block;}

  .banner > .wrapper {grid-template-columns: 1fr; top: 30%; width: 85%;}
  .banner > .wrapper > div {display: none;}
  .banner > .wrapper article {max-width: 100%;}
  .banner > .wrapper article h1 {font-size: 40px; max-width: 250px; margin-bottom: 10px;}
  .banner > .wrapper article h2 {font-size: 20px; max-width: 350px; margin-bottom: 20px;}

  .content {margin: 30px 0;}

  .mySwiper .swiper-slide {grid-template-columns: 1fr 1fr; grid-gap: 5px;}

  .mySwiper .swiper-slide a h3 { bottom: 10px; left: 15px; font-size: 16px; }

  .colour-block .grid > div article {padding: 30px 7.5vw;}

  .content article h3, .feature-banner article h3 {font-size: 25px; margin-bottom: 20px;}
  .feature-banner article h3 {max-width: 85%;}
  .feature-banner {height: 35dvh;}

  footer .flex-row { display: flex; grid-gap: 30px; justify-content: center; padding: 30px 0; flex-direction: column; }
  footer .footer-divider {width: 85%; height: 1px; margin: 0 auto;}
  footer .footer-right {display: grid; grid-gap: 15px; text-align: center; justify-content: center;}

}