@media only screen 
and (max-width : 1024px) {

  #directory{
    padding-right:3%;
  }

}


@media only screen 
and (max-width : 960px) {
  #filter-form #filter-boxes {
    display: grid;
    grid-template-areas:
      "supplier"
      "status" 
      "style" 
      "trend";
    grid-template-columns: auto;
    gap: 15px;
  }
}




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



  #directory #single{
    display:grid;
    grid-template-areas:
      "breadcrumbs"
      "gallery"
      "description";
    grid-template-columns: auto; 
    gap:10px;
  }



}