@media only screen and (min-width: 600px){

    header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo{
        width: 250px
      }
    
    .social{
      display: flex;
      align-items: center;
      margin-left: 40px;
    }
    
    .facelogo {
      width: 30px;
      height: 30px;
      margin-left: 120px;
      margin-right: 20px;
    }
    
    .instalogo {
      width: 30px;
      height: 30px;
    }
    
      
      .navbar{
        display: flex;
        padding: 0 24px;
      }
      
      .nav-menu{
        display: flex;
        gap: 60px;
      }
      
      .nav-link{
        transition: 0.7s ease;
        font-family: 'Josefin Sans', sans-serif;
        color: black;
        text-decoration: none;
        font-weight: 700;
        font-size: 22px;
      }
      
      .nav-menu{
        display: none;
      }
      
    
      .join{
        background-color: #9fe2c6;
        width: 180px;
        text-decoration: none;
        font-family: 'Josefin Sans', sans-serif;
        font-weight: 900;
        font-size: 22px;
        border-radius: 5px;
        color: black;
        box-shadow: 6px 6px 10px #3d3d3b;
        margin-top: -10px;
        margin-left: 125px;
        grid-column: 1/2;
        grid-row: 1/2;  
        z-index: 0;
    }
      
    
    main{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 30px 1fr 530px 340px 300px;
    }

    .banner{
      margin-bottom: 40px;
      background-color: var(--highlight);
      padding: 40px;
      grid-column: 1/2;
      grid-row: 1/2;
    }
    
    #hero{
      grid-column: 1/4;
      grid-row: 2/3;
      padding: 20px;
      display: grid;
    }
    
    #hero-img{
      margin-top: 0px;
  }

    #events{
      grid-column: 1/3;
      grid-row: 3/4;
      margin-top: 10px;
    }
    
    #weather{
      grid-column: 3/4;
      grid-row: 3/4;
    }
    
    #spotlights{
      grid-column: 1/4;
      grid-row: 4/5;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr;
      font-family: 'Josefin Sans', sans-serif;
    }


    /* discover page */

    .content{
      grid-column: 1/4;
      grid-row: 1/4;
      width: 100%;
      display: grid;
      grid-template-columns: 800px 1fr 1fr; 
      font-family: 'Josefin Sans', sans-serif;
    }

    .pictures{
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      grid-column: 1/3;
      grid-row: 1/2;
      
    }

    .pic{
      width: 800px;
    }

    .pic:hover{
      border-radius: 20px;
      box-shadow: 6px 6px 10px #3d3d3b;
      
    }

    .information{
      grid-column: 3/4;
    }

    

    /* join page */

    .joinForm{
      display: grid;
      width: 100%;
      grid-template-columns: 1fr 1fr;
    }

    form{
      grid-column: 1/2;
      margin-left: 100px;
      width: 400px;
    }

    .genDescription{
      margin: 40px 30px;
    }
    
    .npDescription,
    .bronzeDescription,
    .silverDescription,
    .goldenDescription{
      margin-top: 400px;
      margin-left: 30px;
    }
    
    /* directory page */

    .cards{
      display: grid;
      grid-auto-columns: min-content;
      grid-template-columns: 1fr 1fr 1fr;
      margin-top: 30px;
    }

.directory .cards{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.list section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  max-width: 1060px;
  width: 100%;
  height: auto;

}
}