html {
  font-size: 12px;
  font-family: Verdana, Trebuchet, "Trebuchet MS", Helvetica, Arial, sans-serif;
  color: #ddd;
  background-color: #333;
}
a {
  color: inherit;
}

body {
  padding: 10px;
  margin: 0;
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
}



/* ---- Watch ---- */
section.watch {
  width: 1000px; /*50vw;*/
  height: 600px; /*50vh;*/
  grid-area: 1/1; /* Move to front of grid… TODO: Remove?? */
  
  display: grid;
  grid-template: repeat(auto-fit, minmax(100px, 1fr)) /  repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-flow: row;
}

section.watch figure {
  position: relative;
  background-image: linear-gradient(30deg, hsla(0, 0%, 0%, 0.8) 20%, transparent 70%),
                    linear-gradient(-30deg, hsla(0, 0%, 0%, 0.8) 20%, transparent 70%),
                    repeating-linear-gradient(0deg, #444, #444 6px, #3f3f3f 7px, #444 8px);
  margin: 0;
  border: 4px solid hsla(0, 50%, 50%, 0.5);
  overflow: hidden;
  box-sizing: border-box;
}
  section.watch figure:nth-child(2) {
    border: 4px solid hsla(40, 50%, 50%, 0.5);
  }
  section.watch figure:nth-child(3) {
    border: 4px solid hsla(80, 50%, 50%, 0.5);
  }
  section.watch figure:nth-child(4) {
    border: 4px solid hsla(120, 50%, 50%, 0.5);
  }
  section.watch figure:nth-child(5) {
    border: 4px solid hsla(160, 50%, 50%, 0.5);
  }
  section.watch figure:nth-child(6) {
    border: 4px solid hsla(200, 50%, 50%, 0.5);
  }
  section.watch figure:nth-child(7) {
    border: 4px solid hsla(240, 50%, 50%, 0.5);
  }
  section.watch figure:nth-child(8) {
    border: 4px solid hsla(280, 50%, 50%, 0.5);
  }
  section.watch figure:nth-child(9) {
    border: 4px solid hsla(320, 50%, 50%, 0.5);
  }

  section.watch figure figcaption {
    position: absolute;
    top: -4em;
    left: 0;
    right: 0;
    height: 4em;
    background-image: linear-gradient(0deg, transparent 2em, hsla(0, 30%, 0%, 0.9) 20%, hsla(0, 30%, 0%, 0.8) 70%);
    padding-bottom: 2em;
    transition: top 0.2s ease-in-out;
  }
    section.watch figure figcaption:hover {
      top: 0;
    }

@media screen and (orientation: portrait) {
  section.watch {
    grid-auto-flow: row;
  }
}