* {
  margin: 0;
}

body {
  font: 1em/1.125 trebuchet ms, verdana, sans-serif;
  text-align: center;
}

article {
  margin-bottom: 0.5em;
}

h3 {
  font-size: 1.75em;
  line-height: 2;
}

section {
  --w: Min(calc(100vw - 1.5em), 30em);
  --h: calc(1.5*var(--w));
  display: grid;
  place-content: center;
  grid-gap: 0 0.5em;
  --dots: radial-gradient(circle, #000, #fff) 0 0/5px 5px round;
}

h4 {
  font-size: 1.25em;
  text-transform: uppercase;
}
@media (min-width: 60.5em) {
  h4 {
    grid-row: 1;
  }
}

div {
  width: var(--w);
  height: var(--h);
  background: var(--lyr0, var(--img)) var(--sep,  ) var(--lyr1,  );
}

.halftone {
  --lyr1: var(--dots);
  filter: contrast(9);
}

.noproc {
  --img: url(https://assets.codepen.io/2017/portrait_woman.jpg) 50%/cover;
}
.noproc .halftone {
  --sep: ,;
  background-blend-mode: screen;
}

.filter {
  --img: url(https://assets.codepen.io/2017/portrait_tiger.jpg) 50%/cover;
}
.filter .halftone {
  --lyr0:  ;
  position: relative;
}
.filter .halftone::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--img);
  filter: brightness(1.25) contrast(1.25) grayscale(1);
  mix-blend-mode: screen;
  content: "";
}