#artwork {
  max-width: 400px;
  /* Centre the artwork */
  margin: auto;
  padding: 2em;
}

/* For each frame, we set it up so that the div has zero height, and padding that matches the aspect
ratio of the painting (see rules below)
More details on this method here: https://css-tricks.com/aspect-ratio-boxes/ */
.frame {
  height: 0;
  position: relative;
  margin: auto;
  box-shadow: 3px 3px 11px grey;
}

/* Then for the canvas, we position it absolutely in the parent element so the padding doesn't push it down */
.canvas {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* all fr values for the artwork's grids are based on the pixel value /100 */
/* pixel values for artwork estimated using the awesome Page Ruler Chrome extension */
/* https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme?hl=en */

#white-black-red.frame {
  padding-top: calc((70 / 55) * 100%);
}

#white-black-red .canvas {
  display: grid;
  grid-template-rows: 0.45fr 0.33fr 0.09fr 0.07fr 0.54fr 0.37fr 0.09fr 0.08fr 0.09fr 0.14fr 0.42fr 0.07fr 0.5fr 0.07fr 0.23fr 0.13fr 0.1fr;
  grid-template-columns: 0.16fr 0.1fr 0.23fr 0.08fr 0.12fr 0.32fr 0.28fr 0.77fr 0.38fr 0.45fr 0.07fr;
  background-color: #fff;
}

#white-black-red-grey.frame {
  padding-top: calc((70 / 58.7) * 100%);
}

#white-black-red-grey .canvas {
  display: grid;
  grid-template-rows: 2.71fr 0.06fr 0.09fr 0.06fr 0.97fr 0.16fr 1.27fr 0.1fr 0.38fr;
  grid-template-columns: 0.5fr 0.1fr 1.7fr 0.16fr 2.4fr;
  background-color: #000;
}

#yellow-black-white.frame {
  padding-top: calc((70 / 48.9) * 100%);
}

#yellow-black-white .canvas {
  display: grid;
  grid-template-rows: 0.56fr 0.7fr 0.33fr 0.29fr 0.66fr 1.03fr 0.12fr 0.7fr 0.12fr 0.94fr 0.2fr 0.12fr 0.52fr;
  grid-template-columns: 0.37fr 0.12fr 0.67fr 0.86fr 0.69fr 0.12fr 0.52fr 0.12fr 0.16fr 0.46fr 0.3fr;
  background-color: #fff;
}

/* Add drop shadows to lines when it's the yellow/black/white composition - this painting is 3D */
#yellow-black-white .line {
  filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.4));
}

/* we have to use a wrapper around the polygon to apply a drop shadow to it, because otherwise the filter gets added 
to the polygon div and then the clip-path removes it */
.drop-shadow-wrapper {
  filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.4));
}

/* this grid ended up being more complicated than it needed to be due to using the polygon instead of the grid lines for that piece. I've left them in for reference in any case. */
#yellow-black-white .polygon {
  /* polygon starts from the top-left point */
  clip-path: polygon(
    29% 0%,
    34% 0%,
    34% 58%,
    87% 58%,
    87% 60%,
    61% 60%,
    61% 73.5%,
    100% 73.5%,
    100% 75.5%,
    61% 75.5%,
    61% 85%,
    56% 85%,
    56% 75.5%,
    34% 75.5%,
    34% 73.5%,
    56% 73.5%,
    56% 60%,
    34% 60%,
    34% 100%,
    29% 100%,
    29% 60%,
    0% 60%,
    0% 58%,
    29% 58%
  );
  -webkit-clip-path: polygon(
    29% 0%,
    34% 0%,
    34% 58%,
    87% 58%,
    87% 60%,
    61% 60%,
    61% 73.5%,
    100% 73.5%,
    100% 75.5%,
    61% 75.5%,
    61% 85%,
    56% 85%,
    56% 75.5%,
    34% 75.5%,
    34% 73.5%,
    56% 73.5%,
    56% 60%,
    34% 60%,
    34% 100%,
    29% 100%,
    29% 60%,
    0% 60%,
    0% 58%,
    29% 58%
  );
  border-radius: 1px;
  width: 100%;
  height: 100%;
}

#red-blue-yellow-white.frame {
  padding-top: calc((70 / 51.8) * 100%);
}

#red-blue-yellow-white .canvas {
  display: grid;
  grid-template-rows: 0.14fr 0.38fr 0.2fr 0.34fr 0.13fr 0.24fr 1.44fr 0.28fr 0.51fr 0.31fr 0.18fr 0.25fr 0.22fr 0.33fr 0.22fr 0.18fr 0.25fr;
  grid-template-columns: 0.28fr 0.34fr 0.09fr 0.13fr 0.82fr 0.21fr 0.68fr 0.43fr 0.24fr 0.68fr 0.24fr;
  background-color: #fff;
}

.black {
  background-color: #000;
}

.red {
  background-color: #CA4141;
}

.white {
  background-color: #fff;
}

.grey {
  background-color: #E1DFE2;
}

.yellow {
  background-color: #F6D867;
}

.blue {
  background-color: #08449C;
}

header,
footer {
  background-color: #E1DFE2;
  padding: 1em;
}