---
import Layout from "../layouts/Layout.astro";
import Image from "../components/Image.astro";

const images = [
  "https://randomfox.ca/images/1.jpg",
  "https://randomfox.ca/images/2.jpg",
  "https://randomfox.ca/images/3.jpg",
  "https://randomfox.ca/images/4.jpg",
  "https://randomfox.ca/images/5.jpg",
  "https://randomfox.ca/images/6.jpg",
  "https://randomfox.ca/images/7.jpg",
  "https://randomfox.ca/images/8.jpg",
  "https://randomfox.ca/images/9.jpg",
  "https://randomfox.ca/images/10.jpg",
  "https://randomfox.ca/images/11.jpg",
  "https://randomfox.ca/images/12.jpg",
  "https://randomfox.ca/images/13.jpg",
  "https://randomfox.ca/images/14.jpg",
  "https://randomfox.ca/images/15.jpg",
  "https://randomfox.ca/images/16.jpg",
  "https://randomfox.ca/images/17.jpg",
  "https://randomfox.ca/images/18.jpg",
  "https://randomfox.ca/images/19.jpg",
  "https://randomfox.ca/images/20.jpg",
];
---

<Layout>
  <div class="text-center my-16 mb-32">
    ... album title and description ...

    <div class="columns-3">
      {images.map((image) => <Image src={image} alt="" />)}
    </div>

    ... rest of the page ...
  </div>
</Layout>

<!-- <style>
</style> -->