main {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 5px 10px;
  gap: 5px 10px;
}
main > h1, main > hr {
  grid-column: 1 / span 2;
}
main > h1 {
  font-size: 1.2rem;
}
main > h2 {
  font-size: 1rem;
}
h1, h2, p {
  margin: 0;
}

.row-spacer {
  margin: 0.5em 0;
  grid-column: 1 / -1;
}
.span-full {
  grid-column: 1 / -1;
}

#image-wrapper {
  grid-column: 2 / span 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#image-viewer {
  margin-right: 10px;
  position: relative;
  min-width: 450px;
  width: 100%;
  max-width: 650px;

  display: flex;

  overflow: hidden;
}
#image-viewer::before {
  content: "";
  padding-bottom: 75%;
  width: 100%;
  height: 0;
}
#image-viewer > img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;

  display: none;
}
#image-viewer > img.show {
  display: initial;
}

#thumbnail-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 90px));
  grid-gap: 10px;
  gap: 10px;
}
#thumbnail-container > * {
  position: relative;
  width: 100%;

  display: flex;
}
#thumbnail-container > button {
  cursor: pointer;
}
#thumbnail-container > *::before {
  content: "";
  padding-bottom: 100%;
  width: 100%;
  height: 0;
}
#thumbnail-container > * > img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;

  object-fit: cover;
}

/* Mobile-Queries */
@media screen and (max-width: 1024px) {
  #image-wrapper {
    margin-bottom: -10px;

    grid-column: 1 / span 2;
    flex-flow: column;
    align-items: center;
  }
  #image-wrapper > * {
    margin-bottom: 10px;
  }

  #image-viewer {
    margin-right: 0;
    min-width: 300px;
    justify-content: center;
  }

  #thumbnail-container {
    width: 100%;
    grid-template-columns: repeat(4, minmax(60px, 90px));
    justify-content: center;
  }
}