feat: implement barebone zola templates

_src/components/MediaGallery/Gallery.module.css

@@ -0,0 +1,18 @@
+.thumbnailList {
+  display: grid;
+  overflow-x: scroll;
+
+  gap: var(--prj-spacing-3);
+  padding-bottom: var(--prj-spacing-2);
+
+  grid-auto-columns: 25%;
+  grid-auto-flow: column;
+}
+
+.thumbnailItem {
+  width: 100%;
+}
+
+.thumbnailItem:hover {
+  cursor: pointer;
+}

_src/components/MediaGallery/Gallery.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { type Media } from './types';
+
+import classes from './Gallery.module.css';
+import Carousel from '@components/Carousel/Carousel';
+import CarouselItem from '@components/Carousel/CarouselItem';
+
+interface Props {
+  items: Media[];
+  height: number;
+}
+
+export default function Gallery({ items, height = 500 }: Props): JSX.Element {
+  return (
+    <div style={{ height }}>
+      <Carousel>
+        {items.map((item, idx) => (
+          <CarouselItem key={idx}>
+            <img
+              className="respect-height"
+              src={item.thumbnail ?? item.url}
+              alt={item.alt}
+            />
+          </CarouselItem>
+        ))}
+      </Carousel>
+    </div>
+  );
+}

_src/components/MediaGallery/types.ts

@@ -0,0 +1,12 @@
+export enum MediaType {
+  Image = 'image',
+  Video = 'video',
+}
+
+export interface Media {
+  type: MediaType;
+  url: string;
+  alt: string;
+  mime?: string;
+  thumbnail?: string;
+}