.content-layout {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
    "search"
    "shortcuts"
    "main"
    "courses"
    "publications"
    "bannermain"
    "social"
    "bannersub";

  align-items: start;
}

.content-layout > nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

aside.slogan {
  /*grid-area: sideslogan;*/
  display: none;
}

aside.shortcuts {
  grid-area: shortcuts;
}

aside.courses {
  grid-area: courses;
}

aside.search-form {
  grid-area: search;
}

aside.publications {
  grid-area: publications;
}

aside.banner {
  grid-area: bannermain;
}

aside.banner-sub {
  grid-area: bannersub;
}

aside.social-promotion {
  grid-area: social;
}

.medium-only {
  display: none;
}

@media screen and (min-width: 500px) {
  .small-only {
    display: none;
  }
  .medium-only {
    display: initial;
  }
  .content-layout {
    grid-template-areas:
      "search"
      "shortcuts"
      "main"
      "courses"
      "publications publications"
      "bannermain bannermain"
      "social social"
      "bannersub bannersub";
    grid-template-columns: auto;
  }
  .content-layout > nav ul {
    flex-direction: column;
  }
}

@media screen and (min-width: 900px) {
  .content-layout {
    grid-template-columns: auto 260px;
    grid-template-rows: 10em repeat(4, min-content) 1fr;
    grid-template-areas:
      "main search"
      "main courses"
      "main publications"
      "main bannermain"
      "main bannersub"
      "main social"
      ;
  }
}

@media screen and (min-width: 1400px) {
  aside.slogan {
    display: unset;
    grid-area: sideslogan;
    -webkit-writing-mode: vertical-rl; /* Chrome doesn’t support sideways yet. */
    writing-mode: sideways-lr;
    color: #c3c4c5;
	color: #727279;
    display: flex;
    justify-content: start;
    height: 100%;
    padding-bottom: 1em;
    line-height: 1em;
  }
  aside.slogan:hover {
    color: var(--main-color);
  }
  .content-layout {
    grid-template-columns: 30px auto 260px 260px;
    grid-template-rows: 5em repeat(4, min-content) 1fr;
    grid-template-areas:
      "sideslogan main search search"
      "sideslogan main shortcuts shortcuts"
      "sideslogan main courses courses"
      "sideslogan main bannermain bannermain"
      "sideslogan main publications publications"
      "sideslogan main social bannersub"
      "sideslogan main social bannersub";
  }
}