@media screen and (min-width: 450px) {
  .banner {
    height: 250px;
  }
}

@media screen and (min-width: 576px) {
/** general **/

  .header-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .name {
    margin-top: -3rem;
  }

  .name h1 {
    font-weight: 500px;
  }

  .topnav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .topnav a, .botnav a {
    font-size: 1.2rem;
    font-weight: 800;
    border-radius: 5px;
    padding: 0 4px;
  }

  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }

  .banner {
    height: 350px;
  }

  /***EASYWEAR***************************************************************/
  .nav-button-left {
    left: 20%;
  }

  .nav-button-right {
    right: 20%;
  }

/**** Home Page ************************************************************/