/* Real image elements keep both original MOW banners visible on narrow screens. */
.mobile-banner-panel, .mobile-identity-logo, .mobile-identity-mark { display: none; }

@media (max-width: 600px) {
  .original-banner-stage {
    height: 174px;
    aspect-ratio: auto;
    background: #e5f0f7;
  }
  .original-banner-canvas {
    width: 100%;
    height: 100%;
    transform: none;
  }
  .original-banner .banner-frame {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background-image: none;
  }
  .original-banner .mobile-banner-panel {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    object-fit: contain;
    border: 1px solid #b5cddd;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 3px #183d5214;
  }
  .mow-identity-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    align-items: center;
    justify-items: center;
    gap: 8px;
    height: 146px;
    aspect-ratio: auto;
    padding: 8px 12px;
  }
  body:not(.high-contrast) .mow-identity-banner {
    background-image: url('../images/baner-tlo.png'), linear-gradient(130deg, #deeffa, #b1d3e8);
    background-position: center, center;
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat;
  }
  .mobile-identity-logo {
    display: block;
    width: 100%;
    height: 128px;
    object-fit: contain;
  }
  .mobile-identity-mark {
    display: block;
    width: 88px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 3px 3px #173e5929);
  }
  .high-contrast .original-banner-stage,
  .high-contrast .mow-identity-banner { background: #000; border-color: #fff; }
  .high-contrast .mobile-banner-panel { border-color: #fff; box-shadow: none; }
}

@media (max-width: 350px) {
  .original-banner-stage { height: 160px; }
  .mow-identity-banner {
    grid-template-columns: minmax(0, 1fr) 68px;
    gap: 4px;
    height: 132px;
    padding-inline: 8px;
  }
  .mobile-identity-logo { height: 114px; }
  .mobile-identity-mark { width: 68px; height: 84px; }
}