p change the image background (thumbnails) / the text (contentEditable)

- for(var i = 0; i < 7; i++) {
  input(type='radio' name='opt' id=`thumbnail-${i}` checked=i?null:'checked')
  label(for=`thumbnail-${i}`) image #{i}
- }

header.blending
  h2(contentEditable='true' role='textbox' aria-multiline='true') And stay alive

header.textclip
  h2(contentEditable='true' role='textbox' aria-multiline='true') And stay alive

$base: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_';
$imgs: 'art_bw_bg', 'art_bw_butterfly_bg', 
  'cat_bg_00', 'cat_bg_01', 'cat_bg_02', 'cat_bg_03', 'cat_bg_04';
$n: length($imgs);
$d: 100vmin/($n + 3);
$g: .25*$d;
$sh: 0 3px 1px orange;

* { margin: 0; padding: 0 }

body {
  display: flex;
  height: 100vh;
  font: 900 6.5vw/ 100vh cookie;
  text-align: center;
  
  @media (orientation: portrait) {
    flex-direction: column;
    font-size: 9vw;
    line-height: 50vh;
    
    [for] { left: $g }
  }
}

p {
  position: absolute;
  bottom: $g; left: 50%;
  padding: .375em .5em .5em;
  transform: translate(-50%);
  background: darkorange;
  color: white;
  font: 1.25rem trebuchet ms, tahoma, verdana, sans-serif
}

input, label { position: absolute; }

input {
  left: -100vw;
  
  &:checked + label {
    filter: none;
    background-blend-mode: normal;
  }
  
  &:focus, &:hover {
    & + label { filter: sepia(1) }
  }
}

label {
  z-index: 2;
  overflow: hidden;
  top: $g;
  width: $d; height: $d;
  border-radius: 5px;
  box-shadow: 0 0 0 3px currentcolor, 0 0 0 4px #fff;
  background: grey 50%/ cover;
  text-indent: -100vw;
  background-blend-mode: screen;
  transition: .5s;
  cursor: pointer;
}

@for $i from 0 to $n {
  $off: calc(50% + #{($i - .5*$n)*($d + $g) + .5*$g});
  $img: url($base + nth($imgs, $i + 1) + '.jpg');
  
  [id='thumbnail-#{$i}']:checked ~ header {
    background-image: $img;
  }
  
  [for='thumbnail-#{$i}'] {
    left: $off;
    background-image: $img;
    
    @media (orientation: portrait) {
      top: $off;
    }
  }
}

header {
  flex: 1;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_04.jpg) 50%/ cover;
  
  &.blending h2 {
    color: white;
    text-shadow: $sh;
    mix-blend-mode: difference
  }
  
  &.textclip h2 {
    background: inherit;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    filter: invert(1) grayscale(1) contrast(2) 
      drop-shadow($sh)
  }
}

h2:focus { outline: none }