/* Responsive overrides for kmohub.be.
   The inline styles on the pages define the desktop design; the rules here
   adapt the layout for tablets and phones, so !important is required to win
   over inline styles. */

img { max-width: 100%; }

/* Tablet and below */
@media (max-width: 980px) {
  .split-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .dienst-row { grid-template-columns: 1fr !important; gap: 20px !important; }
  .dienst-img { width: 100% !important; height: 220px !important; }
  .media-tall { height: 340px !important; }
  h1 { font-size: 42px !important; }
}

/* Small tablets / large phones */
@media (max-width: 820px) {
  .cols-2, .cols-3 { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Phones */
@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; justify-content: center !important; row-gap: 12px; }
  .site-nav { flex-wrap: wrap; justify-content: center; gap: 10px 18px !important; font-size: 14px !important; }
  .row-between { flex-wrap: wrap; align-items: start !important; }
  .footer-grid, .form-row { grid-template-columns: 1fr !important; }
  .media-tall { height: 260px !important; }
  .price-card { left: 12px !important; bottom: 12px !important; padding: 12px 16px !important; }
  h1 { font-size: 34px !important; line-height: 1.12 !important; }
  h2 { font-size: 27px !important; }
  /* 16px or larger stops iOS Safari from zooming in when a field gets focus */
  input, textarea { font-size: 16px !important; }
}