@media screen and (max-width: 30em) {
    body {
      grid-template-columns: auto;
      grid-template-rows: 115px auto auto 48px;
      grid-template-areas:
        "header"
        "nav"
        "body"
        "footer";
      width: 100%;
    }
  
    body > header h2:nth-child(2) {
      display: none;
    }
  
    #signup {
      text-align: unset;
    }
  
    .hamburger {
      display: block;
      padding: 1em;
      background: var(--primary-gray);
    }
  
    .hamburger::after {
      content: "\2630";
      color: var(--primary-background);
    }
  
    #hamburger:checked + .hamburger::after {
      content: "\2715";
    }
  
    #menu ul {
      display: none;
    }
  
    #menu #hamburger:checked ~ ul {
      display: flex;
      flex-direction: column;
    }
  
    #menu ul li {
      border-top: none !important;
      background: lightgray;
      text-align: unset;
      padding-left: 1em;
    }
  
    #menu ul li:nth-child(1) {
      border-left: 5px solid var(--section-red);
    }
  
    #menu ul li:nth-child(2) {
      border-left: 5px solid var(--section-green);
    }
  
    #menu ul li:nth-child(3) {
      border-left: 5px solid var(--section-purple);
    }
  
    #menu ul li:nth-child(4) {
      border-left: 5px solid var(--section-orange);
    }
  
    #menu ul li:nth-child(5) {
      border-left: 5px solid var(--section-blue);
    }
  
    #menu ul li:nth-child(6) {
      border-left: 5px solid var(--section-pink);
    }
  
    #related {
      display: none;
    }
  
    #news > article {
      margin: 0;
    }
  
    #news header {
      position: relative;
      max-width: unset;
    }
  
    #news header h1 {
      text-shadow: none;
    }
  
    #news header h1 a {
      color: #000;
      font-weight: bold;
    }
  
    #register,
    #login {
      padding: 0;
      background: #fff;
    }
  
    form {
      width: 100% !important;
    }
  }