/* Platform screenshots on the home (Elementor image widgets tagged `platform-shot`,
   Advanced > CSS Classes; home IT #16 / EN #735).

   Goal: two screenshots with different aspect ratios (Pegasus 2.31:1, Artemis 1.85:1)
   shown whole, in identical framed boxes, at every viewport width.

   - Elementor wraps a linked image in an inline-block <a> that shrinks to the image's
     intrinsic width once object-fit is set; make it fill the widget.
   - The box keeps a fixed 16:9 ratio (aspect-ratio), so the frame never depends on
     the pixel height of one rendition.
   - object-fit: contain keeps the full picture; the letterbox is a passe-partout in a
     deeper tone of the Engage band blue (#375989 -> #2B4569), with a 6px even gutter,
     so both the light map and the dark radar read as mounted prints inside the white
     frame drawn by Elementor's border controls. */
.elementor-widget-image.platform-shot .elementor-widget-container > a {
  display: block;
  width: 100%;
}

.elementor-widget-image.platform-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  padding: 6px;
  box-sizing: border-box;
  background-color: #2b4569;
}