index.css

:root {
  color-scheme: light dark;
  scroll-behavior: smooth;

  font-size: clamp(1em, 0.9em + 1vw, 1.25em);
  line-sizing: normal;
     -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
          text-size-adjust: none;

  /*
  I love this color scheme:
  Flexoki by Steph Ango https://stephango.com/flexoki
  */
  --flexoki-black:           #100F0F;
  --flexoki-paper:           #FFFCF0;
  --flexoki-blue-900:        #12253B;
}


body {
    margin: 0;
    padding: 2rem 2rem 4rem;

    font-family: system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;

    background-color: light-dark(var(--flexoki-paper), var(--flexoki-blue-900));
    color: light-dark(var(--flexoki-blue-900), var(--flexoki-paper));
}

body > header,
body > footer {
    text-align: center;
}

body > header {
    margin-bottom: 4rem;
}


:is(body > header, body > footer) ul {
    li { display: inline; }
    li + li::before { content: " • "; }

    a {
        font-weight: bold;
    }
}


h1 > div {
    font-size: 0.8em;
}

h2 {
    font-size: 1.15em;
}

img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border: 1px solid CanvasText;
}

.items {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(19ch, 1fr) );
    grid-gap: max(1.5rem, 3vw);

}

.items h2 {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  width: 98%;
}

.items > div {
    margin-bottom: 2rem;
    position: relative;

    a {
        display: block;
        margin-bottom: 2rem;
        color: inherit;
    }
    a::before {
        position: absolute;
        top: 0;
        left: 0;
        content: " ";
        width: 100%;
        height: 100%;
        background-color: transparent;
        z-index: 1;
    }

    img {
        filter:saturate(0.3);
        transition: filter 0.3s;
    }

    &:hover,
    &:active,
    &:focus {
        img {
            filter: saturate(1);
        }
    }
}