/* --- MEDIUM --- */
@media screen and (max-width: 1007px) {
  main {
    width: 80%;
  }

  .wordmark-das {
    font-size: 35px;
  }
}

/* --- SMALL --- */
@media screen and (max-width: 640px) {
  main {
    margin: 0 16px;
    width: calc(100% - 32px);
  }

  .wordmark-das {
    font-size: 25px;
  }

  header.logo-and-wordmark .logo-das img {
      height: 50px;
      width: 50px;
  }

  header.logo-and-wordmark .wordmark-das {
      font-size: 20px;
  }

  section.search .search-field {
      width: 75%;
  }

  .section-title {
    margin: 8px auto;
    margin-left: 5px;
  }

  ul.section-list {
    list-style-type: none;
    padding: 0;
  }
}

/* --- TINY --- */
@media screen and (max-width: 450px) {
  #header, #sections {
    padding: 20px 16px;
  }

  header.logo-and-wordmark .logo-das img {
      height: 32px;
      width: 32px;
  }

  header.logo-and-wordmark .wordmark-das {
      font-size: 16px;
  }
  
  section.search .search-field {
      width: 60%;
  }

  li.site {
      width: (50% - 5px);
  }
}