/* Viewer Layout Block */
    .inline-viewer-container {
      position: relative;
      width: 100%;          /* Fills the 8-column wrapper entirely */
      overflow: hidden;     /* Hides the edges of the image when zoomed in */
      background-color: #212121;
      cursor: grab;
      touch-action: none;   /* Prevents page scrolling *only* when dragging on the image */
    }

    .inline-viewer-container:active {
      cursor: grabbing;
    }

    /* The Image: dictates container height dynamically */
    .viewer-image {
      display: block;
      width: 100%;
      height: auto;        /* Scales height fluidly based on image aspect ratio */
      user-select: none;
      pointer-events: none; 
      transform-origin: center center;
      transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom, 1));
      transition: transform 0.1s ease-out;
    }

    /* Smooth snapping transition for the fit/reset action */
    .viewer-image.resetting {
      transition: transform 0.3s ease-in-out;
    }

    /* UI Controls positioned neatly over the bottom of the image */
    .viewer-controls {
      position: absolute;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 5;
    }

    .viewer-btn {
      font-size: 1.4rem; line-height: 1.65rem; text-transform: uppercase;
      font-family: 'InterBold', Helvetica, Arial, sans-serif; font-style: normal; font-weight: normal;
      background-color: #654236;
      color: #fcdc29;
      border: 0;
      padding: 0.62rem 1.66rem 0.65rem 1.68rem; margin: -0.25rem 0.5rem 2.5rem;
      border-radius: 5px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      transition: background-color 0.2s, transform 0.1s;
    }

    .viewer-btn:hover {
      background-color: #f28123;
    }

    .viewer-btn:active {
      transform: scale(0.95);
    }