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

<div style="inline-size: 20rem">
  <.image
    loading="eager"
    width={1200}
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio="16:9"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
    srcset="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true 1200w"
    sizes="(min-width: 40rem) 20rem, 100vw"
    height={675}
   />
</div>

<div style="inline-size: 20rem">
  <.image
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio="16:9"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
  >
    <:caption>Canine couture, spring collection: the season's boldest silhouettes, worn on four legs.</:caption>
  </.image>
</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">
  <.image
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio={nil}
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
    data-label="none"
   />
  <.image
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio="1:1"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
    data-label="1:1"
   />
  <.image
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio="3:2"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
    data-label="3:2"
   />
  <.image
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio="2:3"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
    data-label="2:3"
   />
  <.image
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio="4:3"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
    data-label="4:3"
   />
  <.image
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio="3:4"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
    data-label="3:4"
   />
  <.image
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio="5:4"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
    data-label="5:4"
   />
  <.image
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio="4:5"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
    data-label="4:5"
   />
  <.image
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio="16:9"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
    data-label="16:9"
   />
  <.image
    alt="A gray-muzzled dog in a camouflage coat and harness."
    ratio="9:16"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
    data-label="9:16"
   />
</div>