/* ==========================================================================
   About Us — section artwork
   --------------------------------------------------------------------------
   The theme pinned this render with a negative `right`/`top` offset, which
   pushed it 80px past the right edge of the viewport at 1440px — fine for a
   symmetrical coin that loses nothing but rim, wrong for the current artwork,
   whose orbiting light trail and satellite coins reach the frame edge and
   would simply be cut in half.

   `.about-img` now sits inside the first `.container` in the markup, so
   `inset: 0` describes exactly the box the "What is CentPay?" copy occupies
   — not the whole section, which continues past the pull quote. That makes
   the artwork centre vertically against the copy it belongs to and sit in
   the right half of the grid, whole, at any width.
   ========================================================================== */

.about > .container {
  position: relative;
  z-index: 1;
}

/* The 140px top padding matches `.about-wrap`'s own `pt-140`. Without it the
   artwork centres on the container box and rides about 70px high against the
   copy, which starts below that padding.

   `.container` carries z-index 1 and so forms a stacking context, which keeps
   the artwork's negative z-index behind the copy without dropping it behind
   the section background. */
.about .about-img {
  position: absolute;
  inset: 0;
  padding: 140px 15px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: -1;
  pointer-events: none;
}

/* Undo the offset-based placement this replaces.

   The widths run a little over the artwork you actually see, because the
   render carries its own transparent margin. Measured on the alpha channel
   of the current file: 6.2% of the frame is empty on the left against 1.4%
   on the right, and 3.5% / 4.7% top and bottom. So a 570px box paints about
   527px of coins, sitting all but flush to the right of the grid, and the
   near-symmetrical vertical padding is why centring on the box still reads
   as centred on the copy.

   Re-measure these if the render is replaced — the numbers are a property of
   the file, not of the layout. */
.about .about-img img {
  position: static;
  right: auto;
  top: auto;
  width: min(570px, 46%);
  height: auto;
}

@media (max-width: 1199px) {
  .about .about-img img {
    width: min(480px, 45%);
  }
}

/* Below the two-column breakpoint the artwork returns to the flow and centres
   under the copy. The render carries only about 4% transparent margin top and
   bottom, so the separation from the copy above has to be real spacing. */
@media (max-width: 991px) {
  .about .about-img {
    position: static;
    padding: 0;
    display: block;
  }

  .about .about-img img {
    display: block;
    width: min(430px, 78vw);
    margin: 36px auto 0;
  }
}