Add an image gallery shortcode

assets/css/_custom.css

@@ -1,4 +1,5 @@
 @import './_schedule.css';
+@import './_gallery.css';
 
 .header__intro_headline {
   margin: 0;

assets/css/_gallery.css

@@ -0,0 +1,180 @@
+/* Gallery shortcode: square thumbnails, two per row on wide screens, and the lightbox. */
+
+.gallery {
+  container-type: inline-size;
+  margin-block: var(--spacing-l);
+}
+
+.gallery__list {
+  display: grid;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@container (width >= 40rem) {
+  .gallery__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.gallery__item,
+.gallery__figure {
+  margin: 0;
+}
+
+.gallery__link {
+  display: block;
+  overflow: hidden;
+  border-radius: var(--radius-m);
+  cursor: zoom-in;
+
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1;
+    object-fit: cover;
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--color-link);
+    outline-offset: 2px;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .gallery__link img {
+    transition: scale 0.2s;
+  }
+
+  .gallery__link:hover img {
+    scale: 1.03;
+  }
+}
+
+.gallery__credit {
+  margin-block-start: 0.25rem;
+  font-family: var(--ff-alt);
+  font-size: var(--fs-xs);
+  color: var(--color-text-meta);
+}
+
+/* Lightbox */
+
+/* No scrolling of the page behind it. */
+html:has(.lightbox[open]) {
+  overflow: hidden;
+}
+
+.lightbox {
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: 1rem;
+  border: 0;
+  background: rgb(0 0 0 / 0.92);
+  color: #fff;
+
+  &[open] {
+    display: grid;
+    place-items: center;
+  }
+
+  &::backdrop {
+    background: rgb(0 0 0 / 0.6);
+  }
+}
+
+/* On wider screens, the arrows sit beside the image instead of on it. */
+@media (min-width: 40rem) {
+  .lightbox {
+    padding-inline: 5rem;
+  }
+}
+
+.lightbox__figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0;
+}
+
+.lightbox__image {
+  display: block;
+  min-height: 0;
+  max-width: 100%;
+  max-height: calc(100dvh - 7rem);
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.lightbox__caption {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.25rem 1rem;
+  max-width: 50rem;
+  font-family: var(--ff-alt);
+  font-size: var(--fs-s);
+  text-align: center;
+}
+
+.lightbox__credit,
+.lightbox__counter {
+  color: rgb(255 255 255 / 0.75);
+}
+
+.lightbox__counter {
+  font-variant-numeric: tabular-nums;
+}
+
+.lightbox__button {
+  position: fixed;
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.15);
+  color: #fff;
+  font-size: 2rem;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    background: rgb(255 255 255 / 0.3);
+  }
+
+  &:focus-visible {
+    outline: 3px solid #fff;
+    outline-offset: 2px;
+  }
+}
+
+.lightbox__close {
+  inset-block-start: 1rem;
+  inset-inline-end: 1rem;
+}
+
+.lightbox__previous,
+.lightbox__next {
+  inset-block-start: calc(50% - 1.5rem);
+}
+
+.lightbox__previous {
+  inset-inline-start: 1rem;
+}
+
+.lightbox__next {
+  inset-inline-end: 1rem;
+}