/* MOBILE: black canvas + centered image, no white frame */
@media (max-width: 820px) {

  html, body, body > * { background:#000 !important; }

  /* 1) Nuke all white boxes around the image */
  figure, figcaption,
  .item, .item--image, .item-page,
  .image, .image-container, .image-viewer,
  .project, .project__wrap, .project__content,
  .gallery, .gallery-view {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2) Make the viewer a centered stage */
  .image-viewer,
  .project__content,
  .gallery-view,
  .item-page,
  .image-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    width: 100vw !important;
  }

  /* 3) Make the image fit the viewport with no gutters */
  .image-viewer img,
  .project__content img,
  .gallery-view img,
  .item--image img,
  .image-container img,
  .item-page img {
    display: block !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* 4) If your theme uses PhotoSwipe/Fresco, keep overlay pure black */
  .pswp, .pswp__bg,
  .fresco, .fr-overlay, .fr-window, .fr-content {
    background:#000 !important;
    opacity: 1 !important;
  }

  /* 5) Brutal kill for any inline white background */
  [style*="background:#fff"], [style*="background: #fff"],
  [style*="background-color:#fff"], [style*="background-color: #fff"] {
    background: transparent !important;
  }
}