Demo collections noir

<main>
  <!-- The only function of the SVG is to provide a custom filter -->
  <svg viewBox="0 0 1000 800">
    <defs>
      <filter
        id="wax"
        width="1.1839064"
        height="1.1839064"
        x="-0.091953214"
        y="-0.091953214"
        color-interpolation-filters="sRGB"
      >
        <feGaussianBlur
          id="feGaussianBlur3"
          result="result1"
          in="SourceGraphic"
          stdDeviation="2"
        />
        <feTurbulence
          id="feTurbulence3"
          result="result0"
          numOctaves="5"
          baseFrequency="0.05"
          type="fractalNoise"
        />
        <feDisplacementMap
          id="feDisplacementMap3"
          result="result2"
          scale="10"
          yChannelSelector="G"
          xChannelSelector="R"
          in="result1"
          in2="result0"
        />
        <feColorMatrix
          id="feColorMatrix3"
          values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 10 0 "
          result="result3"
        />
        <feBlend
          id="feBlend3"
          mode="multiply"
          in="result2"
          result="result5"
          in2="result3"
        />
        <feGaussianBlur
          id="feGaussianBlur4"
          result="result4"
          in="result3"
          stdDeviation="5"
        />
        <feComposite
          id="feComposite4"
          k1="0.5"
          k3="1.5"
          k2="0.15"
          in="result4"
          in2="result5"
          operator="arithmetic"
          result="result6"
          k4="0"
        />
        <feComposite
          id="feComposite5"
          operator="in"
          in="result6"
          in2="result4"
        />
      </filter>
    </defs>
  </svg>
  <nav>
    <ul>
      <li><a href="">Demos</a></li>
      <li aria-current="page"><a href="">Collections</a></li>
    </ul>
  </nav>
  <ol class="collection-list">
    <li>
      <div class="covers">
        <img
          src="img/placeholder.svg"
          alt="a generic placeholder image"
          decoding="async"
          width="800"
          height="800" eleventy:ignore />
        <img
          src="img/placeholder.svg"
          alt="a generic placeholder image"
          decoding="async"
          width="800"
          height="800" eleventy:ignore />
      </div>
      <h2>
        <a href="#">Alternative Book Covers</a><span class="count">(3)</span>
      </h2>
      <p class="description">
        Creating alternative covers for books that I've read.
      </p>
    </li>
    <li>
      <div class="covers">
        <img
          src="img/placeholder.svg"
          alt="a generic placeholder image"
          decoding="async"
          width="800"
          height="800" eleventy:ignore />
        <img
          src="img/placeholder.svg"
          alt="a generic placeholder image"
          decoding="async"
          width="800"
          height="800" eleventy:ignore />
      </div>
      <h2><a href="#">Art Addendums</a><span class="count">(7)</span></h2>
      <p class="description">Adding my own twist to works of art.</p>
    </li>
     <li>
      <div class="covers">
        <img
          src="img/placeholder.svg"
          alt="a generic placeholder image"
          decoding="async"
          width="800"
          height="800" eleventy:ignore />
        <img
          src="img/placeholder.svg"
          alt="a generic placeholder image"
          decoding="async"
          width="800"
          height="800" eleventy:ignore />
      </div>
      <h2>
        <a href="#">Title Sequences</a><span class="count">(15)</span>
      </h2>
      <p class="description">
        Recreating title sequences from TV shows and movies as web animations.
      </p>
    </li>
     <li>
      <div class="covers">
        <img
          src="img/placeholder.svg"
          alt="a generic placeholder image"
          decoding="async"
          width="800"
          height="800" eleventy:ignore />
        <img
          src="img/placeholder.svg"
          alt="a generic placeholder image"
          decoding="async"
          width="800"
          height="800" eleventy:ignore />
      </div>
      <h2><a href="#">Arifice</a><span class="count">(43)</span></h2>
      <p class="description">Experiments & exercises to improve web dev trickery.</p>
    </li>
  </ol>
</main>

@font-face {
  font-family: "Road Rage";
  src: url(./RoadRage-Regular.woff2);
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  --bg-color: hsla(0, 0%, 10%, 0.7);

  min-height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;

  background-color: var(--bg-color);
  background-image: url("img/paper.webp");
  background-size: cover;
  background-blend-mode: soft-light;

  font-family: "Open Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
    sans-serif;
  line-height: 1.25;
}

a {
  color: inherit;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.05rem;
}

main {
  max-width: 800px;
  margin: 3rem 1.5rem;
}

svg {
  position: absolute;
  width: 0;
  height: 0;
}

nav ul {
  position: relative;
  left: -0.75rem;

  padding: 0;
  margin-block-end: 2rem;

  list-style-type: none;

  li {
    position: relative;
    display: inline-block;

    padding: 0.5rem;

    a {
      text-decoration: none;
    }
  }

  li::after {
    content: "";
    display: block;
    width: 110%;
    height: 2.5rem;

    position: absolute;
    translate: -10% -75%;

    z-index: -1;
  }

  li[aria-current="page"]::after {
    border: 2px solid black;
    filter: url(#wax);
  }
}

.collection-list {
  list-style: none;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 3rem;
  row-gap: 4rem;

  li {
    --padding-inline: 0.75rem;
    --bg-color: hsl(0, 0%, 15%);

    aspect-ratio: 5 / 4;

    position: relative;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;

    background-color: var(--bg-color);
    color: #cccccc;

    &::before {
      --width: 2.5%;

      content: "";
      display: block;

      position: absolute;
      top: calc(var(--width) * -1);
      left: calc(var(--width) * -1);

      width: calc(100% + (var(--width) * 2));
      aspect-ratio: inherit;
      background-color: white;
      filter: url(#wax);

      z-index: -1;
    }

    .covers {
      display: flex;
      border: 0.05rem solid hsl(0, 0%, 85%);
      border-block-end: none;

      img {
        display: block;

        max-width: 100%;
        width: 50%;
        height: auto;
      }
    }

    h2 {
      margin-block-start: 0.5rem;
      margin-block-end: 1rem;
      padding-inline: var(--padding-inline);

      font-family: "Road Rage", sans-serif;
      font-size: 1.5rem;
      font-weight: 400;

      color: hsl(0, 0%, 85%);

      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      .count {
        padding-inline-start: 0.25rem;
        font-size: 0.9rem;
      }
    }

    .description {
      margin: 0;
      margin-block-end: 0.5rem;

      padding-inline: var(--padding-inline);
    }
  }
}