.article {
  float: left;
  width: 30%;
  background: #fff;
  margin: 10px 1.665%;
 text-align:left; 
  
  -webkit-box-shadow: 1px 1px 3px 0px rgba(33,33,33,0.44);
-moz-box-shadow: 1px 1px 3px 0px rgba(33,33,33,0.44);
box-shadow: 1px 1px 3px 0px rgba(33,33,33,0.44);
}

.article img{ width:100%; height:auto; /*max-width:360px;*/}

.article h2{width:90%; height:auto; padding:5px 5%;  color:#363738; font-size:14px; text-transform:uppercase;
text-align:left;  }
.article p{width:90%; height:auto; padding:0 5% 7px 5%;  color:#0d8de3; font-size:14px; text-transform:capitalize;  }
@media all and (max-width: 900px) and (min-width : 640px){
.article {
    width: 48%;
	margin: 10px 1%;
  }
}
  @media only screen
and (min-width : 321px)  
and (max-width : 639px)   {
.article {
  float: left;
  width: 90%;
  background: #fff;
  margin: 10px 5%;
 text-align:left; 
}


}

@media only screen
and (max-width : 320px)   {
.article {
  width: 96%;
  margin: 5px 2%;
}

.article h2{ font-size:12px;}
}