.collection {
  max-width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

.gallery {
  margin: 0 1em;
  max-width: 96px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  word-wrap: break-word;
  vertical-align: top;
}

.minifigure {
  margin: 0 1em;
  max-width: 150px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  word-wrap: break-word;
  vertical-align: top;
}

.element {
  max-width: 128px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  word-wrap: break-word;
  vertical-align: top;
}

.element figcaption {
  font-size: x-small;
  border-bottom: 1px solid black;
  
}

.element img {
  max-width: 64px;
}

.no {
  color: pink;
}

.new {
  color: gold;
}

.note {
  color: lightgray;
}

td {
  padding: 0px;
}

table {
  border-spacing: 0px;
  margin:1em auto;
}

tr td {
  padding: 5px;
}

figure + figure {
  border-top: none;
  padding-top: 0;
}

@media only screen and (max-width: 1280px) {
  main {
    width: 100%
  }
}

@media only screen and (max-width: 360px) {
  .minifigure {
    max-width: 100px;
  }
}

@media only screen and (min-width: 601px) {
  main {
    max-width: none;
  }
}

@media only screen and (min-width: 1281px) {
  main {
    max-width: 1280px;
  }
}

/* commentary */
input[type=checkbox] {display:none;}
input[type=checkbox] ~ label {text-decoration: underline}
input[type=checkbox] ~ label:hover {color:DarkGoldenRod}
input[type=checkbox] ~ span {
  display:none;
  color:Black;
  background-color:White;
}
input[type=checkbox]:checked ~ label {color:Red}
input[type=checkbox]:checked ~ span {display:block;}