span {
  opacity: 0.5;
}

#header h2 {
  font-size: var(--font-med);
  margin-bottom: 10px;
  line-height: 100%;
}

#header,
#thumbnail,
#description,
#credits,
#recognitions {
  grid-column: 1 / span 3;
}

#credits p,
#recognitions p {
  line-height: 130%;
  margin-bottom: .25rem;
}

#header {
  grid-row-start: span 1;
}

#thumbnail {
  grid-row: 8 / span 4;
}

#link {
  grid-column: 1 / span 1;
  grid-row-start: 7;
  margin-top: auto;
  display: flex;
}

a.button {
  text-decoration: none;
  background-color: var(--color-light-glass);
  border: var(--glass-border);
  border-radius: var(--border-radius);
  padding: 10px 12px 12px 12px;
  box-sizing: border-box;
  width: 100%;
  height: fit-content;
}

/* tablet breakpoing */
@media (min-width: 650px) {
  #header {
    grid-column-start: span 6;
  }

  #credits,
  #recognitions {
    grid-column: 4 / span 2;
  }

  #link {
    grid-row: 6;
  }

  #thumbnail {
    grid-column-start: span 6;
    grid-row: 7 / span 6;
  }
}

/* desktop breakpoint */
@media (min-width: 1024px) {
  main {
    grid-auto-flow: column;
  }

  #header,
  #thumbnail,
  #link,
  #description,
  #credits,
  #recognitions {
    grid-column-start: 2;
  }

  #header {
    grid-row: 1 / span 1;
    grid-column: 2 / span 7;
  }

  #thumbnail {
    grid-row: 4 / span 6;
    grid-column: 2 / span 7;
  }

  #link {
    grid-row-start: 3;
  }

  #credits {
    grid-column-start: 5;
    grid-row-start: 2;
  }

  #recognitions {
    grid-column-start: 7;
    grid-row-start: 2;
  }
}