/* Header strip: fixed height, media centered at the chosen width, background color around it.
 * Mobile is below 768px; tablets (768px and up) show the desktop banner. */
.mkhb { display: flex; justify-content: center; align-items: center; height: var(--mkhb-h); overflow: hidden; background: var(--mkhb-bg); }
.mkhb__link { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.mkhb__media { display: block; width: var(--mkhb-w); max-width: 100%; height: 100%; object-fit: contain; }
.mkhb--mobile { display: none; }

@media (max-width: 767.98px) {
  .mkhb--both { height: var(--mkhb-hm); }
  .mkhb--both .mkhb__media { width: var(--mkhb-wm); }
  .mkhb--desktop { display: none; }
  .mkhb--mobile { display: flex; }
}