/* Preserves the original 960px desktop design while preventing horizontal overflow on smaller screens. */
@media (max-width: 980px) {
  body { min-width: 0; overflow-x: hidden; }
  #wrapper, #main, #branding, #access, #access .menu-header, div.menu, #colophon, #masthead, #footer { width: 100%; max-width: 960px; box-sizing: border-box; }
  #wrapper { padding-left: clamp(12px, 3vw, 20px); padding-right: clamp(12px, 3vw, 20px); }
  #branding { background-size: 100% auto; height: auto; min-height: 0; aspect-ratio: 960 / 305; }
  #about-para { width: min(250px, 42%); box-sizing: border-box; margin: 2.5% 5% 1% 3%; }
  #container { width: calc(100% - 290px); margin-right: 30px; }
  #primary, #secondary { width: 250px; }
}
@media (max-width: 700px) {
  #masthead { height: auto; min-height: 0; }
  #header { min-height: 0; padding: 12px 14px 0; }
  #site-title { float: none; width: auto; }
  #site-title a { margin: 0; }
  #site-description { float: none; clear: both; width: auto; text-align: left; margin: 12px 0; }
  #access { float: none; width: 100%; margin: 0; }
  #access .menu-header, div.menu { width: 100%; margin: 0; }
  #access .menu-header ul, div.menu ul { float: none; display: flex; flex-wrap: wrap; justify-content: center; padding: 0; }
  #access .menu-header li, div.menu li { float: none; }
  #access a { padding: 0 12px; font-size: 14px; }
  #access ul ul { top: 100%; left: 0; }
  #branding { aspect-ratio: auto; background: none; height: auto; padding: 0; display: flex; flex-direction: column; }
  #branding::before { content: ""; display: block; width: 100%; aspect-ratio: 960 / 305; background: url("/wp-content/themes/xcel-imaging/img/banner.png") center / 100% auto no-repeat; }
  #about-para { width: auto; max-width: 560px; margin: 16px clamp(12px, 5vw, 24px); padding: 0; }
  #about-para h2 { font-size: 20px; margin-bottom: 10px; }
  #about-para p { font-size: 14px; }
  #main { width: 100%; padding: 0; }
  #container { float: none; width: 100%; margin: 0; }
  #primary, #secondary { float: none; width: 100%; margin: 20px 0 0; }
  #content { margin: 0; }
  #colophon { width: 100%; padding: 16px 0; }
  #site-info { float: none; width: auto; line-height: 1.6; }
  #footer { height: auto; }
  img { max-width: 100%; height: auto; }
  #content img { max-width: 100%; height: auto; }
  table { max-width: 100%; overflow-x: auto; display: block; }
}
@media (max-width: 420px) { #access a { padding: 0 8px; font-size: 13px; } }