aside {

grid-area: side;

}

main {

grid-area: main;

}

.wrapper {

min-height: 100%;
width: 100%;

// Main grid is only activated on large screens
@media screen and (min-width: $large-phone) {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas: "side side side main main main main main main";
}

@media screen and (min-width: $ipad) {
  grid-template-areas: "side side side main main main main main main";
}

@media screen and (min-width: $desktop) {
  grid-template-areas: "side side main main main main main main main";
}

@media screen and (min-width: $widescreen) {
  grid-template-areas: "side main main main main main main main main";
}

}

// For items on list pages grid {

@media screen and (min-width: $large-phone) {
  margin: 2rem 0 4rem 0;
}

margin: 1.5rem 0;

}

list-grid {

display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-template-rows: auto;

li {
  background-color: $tile-background-color;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  list-style-type: none;
  padding: 1rem;
  -webkit-box-shadow: $drop-shadow;
  -moz-box-shadow: $drop-shadow;
  box-shadow: $drop-shadow;
  word-wrap: break-word;

  a {
    text-decoration: none;
  }
}

}