/* ---- grid ---- */

.grid {
  max-width: 100%;
  margin: auto; 
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 370px;
  height: 544px;
  float: left;
  margin: 10px;
  border: 1px solid #ffffff;
}


.grid-item--width2 { width: 765px; height: 303px }
.grid-item--height1 {height: 303px;}

.orange {border: 2px solid #f7941e;}
.blue {border: 2px solid #00aec5}
.grey {border: 2px solid #636466;}


/* Mobile phones only - one column  */

@media only screen and (max-width: 480px) {
    
.grid-item  {width: 100%; height: auto; margin-left: 0;}
.grid-item--width2 { width: 100%; height: auto;}
.grid-item--height1 {width: 100%; height: auto;}

}

 @media only screen and (min-width: 481px) and (max-width: 750px) {

 .grid-item  {width: 48%; height: auto; margin-left: 0;}
 .grid-item--width2 {width: 98%; height: auto;}
 .grid-item--height1 {width: 48%; height: auto;}
  
 }