@layer components {
  .rx-image-frame {
    --rx-image-frame-meta: #767676;
    --rx-image-frame-edge: #dddddd;
    inline-size: min(100%, 8rem);
    min-inline-size: 0;
    margin: 0;
    /*
      画像は灰色の枠で余白を埋めない。比率の枠は並べた時の位置をそろえるためだけに使い、色を持たせない。
      画像はBC2の添付の画像と同じく、1px #dddddd の枠の内側に1pxの白い余白を取って囲む
      （実測: basecamp2-official/bc2-help-files-03.png (97, 89) と bc2-help-files-10.png (90, 418)。1倍。
      枠は #d4d4d4〜#dcdcdc。一覧の縮小 bc2-help-files-07.png の枠 #dddddd にそろえる）。影は付けない。
      全体を表示する時は画像を枠の中央に置き、縁は画像そのものに沿わせる。角丸は付けない。
    */
    & > .image {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 5 / 7;
      min-block-size: 0;
      & > img {
        display: block;
        max-inline-size: 100%;
        max-block-size: 100%;
        inline-size: auto;
        block-size: auto;
        min-block-size: 0;
        padding-block: var(--rx-stroke-width);
        padding-inline: var(--rx-stroke-width);
        border: var(--rx-stroke-width) solid var(--rx-image-frame-edge);
        background: var(--rx-surface);
      }
      /* 画像がない時だけ、淡い灰色の面に罫線の輪郭と文言を置いて場所を示す。 */
      & > span {
        display: grid;
        place-items: center;
        inline-size: 100%;
        block-size: 100%;
        padding-inline: var(--rx-space-2);
        border: var(--rx-stroke-width) solid var(--rx-border);
        background: var(--rx-gray-20);
        color: var(--rx-muted);
        font-size: var(--rx-small);
        line-height: var(--rx-small-leading);
        text-align: center;
        overflow-wrap: anywhere;
      }
    }
    /*
      説明はBC2のFilesの格子と同じく中央にそろえ、名前を黒い太字の13px、大きさや日付を灰色の12pxで添える。
      実測の#999999は白地で4.5:1に届かないので、色合いを保って#767676にする。
    */
    & > figcaption {
      display: grid;
      justify-items: center;
      margin-block-start: var(--rx-space-2);
      text-align: center;
      overflow-wrap: anywhere;
      & > .name {
        color: var(--rx-text);
        font-size: var(--rx-label);
        font-weight: 700;
        line-height: var(--rx-label-leading);
      }
      & > .meta {
        color: var(--rx-image-frame-meta);
        font-size: var(--rx-small);
        line-height: var(--rx-small-leading);
      }
    }
    &[data-shape="square"] > .image {
      aspect-ratio: 1;
    }
    &[data-shape="landscape"] {
      inline-size: min(100%, 16rem);
    }
    &[data-shape="landscape"] > .image {
      aspect-ratio: 16 / 9;
    }
    /* 切り抜いて表示する時は画像を枠いっぱいに置き、縁も枠に沿わせる。 */
    &[data-fit="cover"] > .image > img {
      position: absolute;
      inset-block: 0;
      inset-inline: 0;
      inline-size: 100%;
      block-size: 100%;
      max-block-size: none;
      object-fit: cover;
    }
  }
}