header {
  padding: 10px 30px 0;
}

.checkerboards {
  opacity: .3;
  width: 160px;
  height: 40px;
  z-index: -5;
  margin-left: 1rem;
  display: flex;
}

.checkerboard {
  width: 80px;
}

.archive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 200px;
  grid-gap: 2em 1em;
  align-items: start;
  justify-items: center;
  padding: 2rem 0 2rem;
}

.grid-item {
  display: flex;
  flex-direction: column;
  border-top-right-radius: 16px;
  border-top-left-radius: 0px;
}

.grid-item:hover,
.grid-item:focus {
  background-color: rgba(0, 0, 0, 0.1);
}

.img-archive {
  max-height: 150px;
  object-fit: contain;
}

/* NAVIGATION */
.nav-archive {
  position: static;
  align-self: start;
}

.nav-archive ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0;
  padding-top: 1rem;
  flex-wrap: wrap;
}

.nav-archive li{
  padding-right: .5em;
}

.nav-archive li a {
  font-size: 1.5rem;
  padding: 0 .5em;
  color: rgba(0, 0, 0, 0.5);
}

.nav-archive li a:hover,
.nav-archive li a:focus {
  background-color: rgba(0, 0, 0, 0.1);
  border-top-right-radius: 16px;
  box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
}

.link-archive-21:hover,
.link-archive-21:focus,
.link-archive-21.active {
  color: #00f;
}

.link-archive-22:hover,
.link-archive-22:focus,
.link-archive-22.active {
  color: #0c9997;
}

.link-archive-23:hover,
.link-archive-23:focus,
.link-archive-23.active {
  color: #ebaa1a;
}

.link-archive-24:hover,
.link-archive-24:focus,
.link-archive-24.active {
  color: #c4458a;
}

.link-archive-25:hover,
.link-archive-25:focus,
.link-archive-25.active {
  color: #7415ea;
}

.link-archive-26:hover,
.link-archive-26:focus,
.link-archive-26.active {
  color: #a8ca58;
}

/*----------------*/
/*-MEDIA QUERIES--*/
/*----------------*/

@media (min-width: 880px){
  .archive-container {
    grid-template-columns: 1fr 4fr 1fr;
  }

  .archive-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  header {
    padding: 1rem;
    text-align: center;
  }

  .checkerboards {
    margin: 0 auto;
  }

  /* NAVIGATION*/
  .nav-archive {
    margin: 0;
    justify-self: end;
  }

  .nav-archive ul {
    padding-top: 2rem;
    margin-top: 0;
    flex-direction: column;
  }

  .nav-archive li{
    padding-right: 2em;
    padding-bottom: 1em;
  }
}