@media (min-width: 300px) {
  
  .wrapper{
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-template-rows: 60px auto auto;    
  }

}

@media (min-width: 500px) {
 
  .wrapper{
    grid-template-rows: 60px auto 200px;
  }
}

/* --------------- LISTINGS --------------- */

.listings{
    grid-column: col-start / span 12;
    align-self: stretch;
    padding-top: 60px;
    padding-bottom: 60px
  }
  
  .listings-content{
    display: grid;
    grid-row-gap: 30px;
    grid-column: 1fr 1fr;
    height: 100%;
  }

  .listings-content a{
    color: #939B9E;
    transition: 0.2s;
  }

  .listings-content a:hover {
    color: #FAF3DD;
    transition: 0.2s;
  }

  li{
    padding-bottom: 8px;
  }

  @media (min-width: 300px) {
  
    .wrapper{
      grid-template-columns: repeat(12, [col-start] 1fr);
      grid-template-rows: 60px auto auto;    
    }
    .listings-a{
        grid-area: auto;
        align-self: center;
      }
      
      .listings-b{
        grid-area: auto;
        align-self: start;   
      }
      
      .listings-c{
        grid-area: auto;
        align-self: start;  
      }
  }
  
  @media (min-width: 768px) {
 
    .wrapper{
      grid-template-rows: 60px auto 220px;
    }

  }
  
  @media (min-width: 768px) {

    .listings-a{
        grid-area: 1 / 1 / 2 / 3;
        align-self: center;
      }
      
      .listings-b{
        grid-area: 2 / 1 / 3 / 2;
        align-self: start;   
      }
      
      .listings-c{
        grid-area: 2 / 2 / 3 / 3;
        align-self: start;  
      }
  }