:root {
  color-scheme: light dark;
  --bg: light-dark(hsl(0 0 100%), hsl(0 0 0));
  --fg: light-dark(hsl(0 0 0), hsl(0 0 100%));
  --bd: light-dark(whitesmoke, hsl(0 0 20%));
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  margin: 0;
  font-family: sans-serif;
}

#highlighter {
  display: none;
}

.grid {
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 2rem;
  gap: 2rem;
}

.item {
  position: relative;
  overflow: clip;
}

.item > * {
  position: absolute;
  inset: 0;
}

img {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: var(--bd);
  object-fit: cover;
  object-position: center bottom;
  z-index: 1;
  filter: grayscale(1) contrast(1.5) brightness(1.5);
}

.halftone {
  --pattern: radial-gradient(closest-side, var(--fg), var(--bg)) 0/ 0.4rem 0.4rem
    space;
  --map: conic-gradient(#888 0 0), var(--imageUrl) 50% / cover grey;
  background: var(--pattern), var(--map);
  background-blend-mode: multiply /* between pattern & map */,
    screen /* between map layers */, luminosity /* between map layers */;
  filter: contrast(6);
}

@keyframes pattern {
  to {
    translate: calc(var(--bgPosition) * -1) 0;
  }
}
CSS Halftone Pattern
