@layer compositions {
  /*
  FRAME COMPOSITION
  More info: https://every-layout.dev/layouts/frame/
  Content centred in a box of a fixed aspect ratio: media cropped to fit by
  object-fit, or a glyph in a square control (--frame-ratio: 1). No
  overflow: hidden, which would clip a [ hit-area ] tap target.

  CUSTOM PROPERTIES (defaults in tokens.css)
  --frame-ratio: the box's aspect ratio
  --frame-display: none takes the frame out, like any other display
  */
  .frame {
    display: var(--frame-display);
    justify-content: center;
    align-items: center;
    aspect-ratio: var(--frame-ratio);
  }

  .frame > img,
  .frame > video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}