body {
  background: #F9FAEE;
}

.wrap {
  width: 103.9230484541vh;
  height: 90vh;
  margin: 5vh auto;
  position: relative;
}

.wrap > span {
  position: absolute;
  transition: all 1s ease-in-out;
}

.red {
  top: 0;
  left: 34.6410161514vh;
  border-style: solid;
  border-color: transparent;
  display: inline-block;
  border-bottom-color: #c83723;
  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
}

.yellow {
  bottom: 0;
  left: 0;
  border-style: solid;
  border-color: transparent;
  display: inline-block;
  border-bottom-color: #fac800;
  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
}

.blue {
  bottom: 0;
  right: 0;
  border-style: solid;
  border-color: transparent;
  display: inline-block;
  border-bottom-color: #003c83;
  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
}

.purple {
  top: 30vh;
  left: 51.9615242271vh;
  border-style: solid;
  border-color: transparent;
  display: inline-block;
  border-bottom-color: #463a61;
  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
}

.orange {
  top: 30vh;
  left: 17.3205080757vh;
  border-style: solid;
  border-color: transparent;
  display: inline-block;
  border-bottom-color: #dc7115;
  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
}

.green {
  bottom: 0;
  left: 34.6410161514vh;
  border-style: solid;
  border-color: transparent;
  display: inline-block;
  border-bottom-color: #326e3c;
  border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
}

.mauve {
  top: 30vh;
  left: 34.6410161514vh;
  border-style: solid;
  border-color: transparent;
  display: inline-block;
  border-top-color: #734b4a;
  border-width: 30vh 17.3205080757vh 0 17.3205080757vh;
}

.slate {
  bottom: 0;
  left: 51.9615242271vh;
  border-style: solid;
  border-color: transparent;
  display: inline-block;
  border-top-color: #3f4c54;
  border-width: 30vh 17.3205080757vh 0 17.3205080757vh;
}

.beige {
  bottom: 0;
  left: 17.3205080757vh;
  border-style: solid;
  border-color: transparent;
  display: inline-block;
  border-top-color: #b4a915;
  border-width: 30vh 17.3205080757vh 0 17.3205080757vh;
}

figcaption {
  padding: 1em;
  line-height: 1.2;
  max-width: 18em;
  font-family: Baskerville, Palatino, serif;
  border-left: 0.5em solid #734b4a;
}

h1 {
  font-size: 1.3em;
}

@media only screen and (min-width: 800px) {
  figcaption {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
  }
}