Image Layouts

<section class="grid grid-cols-2 gap-6 md:grid-cols-3">
  <!-- Row -->
  <img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=1" />
  <img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=2" />
  <img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=3" />
  <!-- Row -->
  <img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=4" />
  <img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=5" />
  <img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=6" />
  <!-- Row -->
  <img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=7" />
  <img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=8" />
  <img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=9" />
</section>

<section class="grid grid-cols-2 gap-4">
  <!-- Row -->
  <img class="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=1" />
  <img class="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=2" />
  <!-- Row -->
  <img class="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=3" />
  <img class="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=4" />
</section>

<section class="grid grid-cols-2 gap-4 md:grid-cols-4">
  <!-- Column -->
  <div class="grid gap-4">
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/320?random=1" />
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/120?random=2" />
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=3" />
  </div>
  <!-- Column -->
  <div class="grid gap-4">
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/300?random=4" />
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=5" />
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/140?random=6" />
  </div>
  <!-- Column -->
  <div class="grid gap-4">
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=7" />
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/320?random=8" />
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/140?random=9" />
  </div>
  <!-- Column -->
  <div class="grid gap-4">
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/320?random=10" />
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/140?random=11" />
    <img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=12" />
  </div>
</section>

<section class="grid gap-4">
  <!-- Featured -->
  <header>
    <img class="h-auto max-w-full bg-surface-500 rounded-container" src="https://picsum.photos/960/512?random=1" />
  </header>
  <!-- Row -->
  <div class="grid grid-cols-5 gap-4">
    <img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=2" />
    <img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=3" />
    <img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=4" />
    <img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=5" />
    <img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=6" />
  </div>
</section>