<div style="inline-size: 16rem">
  <.frame>
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
</div>

<style>
  .psb-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 1rem;
    align-items: start;
  }

  .psb-gallery > * {
    position: relative;
  }

  .psb-gallery > *::after {
    content: attr(data-label);
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-start: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    color: #fff;
    background: rgb(0 0 0 / 65%);
    border-radius: 0.25rem;
  }
</style>
<div class="psb-gallery">
  <.frame ratio="1:1" data-label="1:1">
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
  <.frame ratio="3:2" data-label="3:2">
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
  <.frame ratio="2:3" data-label="2:3">
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
  <.frame ratio="4:3" data-label="4:3">
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
  <.frame ratio="3:4" data-label="3:4">
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
  <.frame ratio="5:4" data-label="5:4">
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
  <.frame ratio="4:5" data-label="4:5">
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
  <.frame ratio="16:9" data-label="16:9">
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
  <.frame ratio="9:16" data-label="9:16">
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
</div>

<style>
  .psb-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 1rem;
    align-items: start;
  }
</style>
<div class="psb-gallery">
  <.frame shape={nil}>
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
  <.frame shape="circle">
    <img
      src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
      alt="A gray-muzzled dog in a camouflage coat and harness."
    />
  </.frame>
</div>