/* -- DEFAULTS -- */

div, ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* -- FLUID GRID STYLES -- */

#Grid{
  margin-bottom: 40px;
  text-align: justify;
  font-size: 0.1px;
}

#Grid li{
  display: inline-block;
  background: #000;
  width: 23%;
  padding-top: 23%; /* Used instead of height to give elements fluid, width-based height */
  margin-bottom: 2.5%;
}

#Grid:after{
  content: '';
  display: inline-block;
  width: 100%;
  border-top: 10px dashed #922d8d; /* Border added to make element visible for demonstration purposes */
}

#Grid .placeholder{
  padding: 0;
  border-top: 10px solid #922d8d; /* Border added to make element visible for demonstration purposes */
}

/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */

/* 3 COL */

@media (max-width: 800px){
  #Grid li{
    width: 31%;
    padding-top: 31%;
    margin-bottom: 3%;
  }
}

/* 2 COL */

@media (max-width: 600px){
  #Grid li{
    width: 48%;
    padding-top: 48%;
    margin-bottom: 4%;
  }
}

/* SINGLE COL */

@media (max-width: 400px){
  #Grid li{
    width: 100%;
    padding-top: 100%;
    margin-bottom: 5%;
  }
}


/* Le Code HTML





  

  

  

  

  

  



*/