#main-container {

  margin: 10px auto;

  max-width: 1200px;

  background-color: white;

  height: 100%;

  overflow: hidden;

}



.block {

  background-color: steelblue;

  width: 31.33%;

  height: 300px;

  float: left;

  margin: 1%;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}



.blog-bg-container {

  width: 380px;

  height: 300px;

  background-color: #e3e3e3;

  position: relative;

  overflow: hidden;

}



.blog-description {

  color: white;

  text-decoration: none;

  padding: 0 20px 20px 20px;

  background: linear-gradient(rgba(242, 239, 8), rgba(255, 158, 2));

  position: absolute;

  height: 100%;

  -webkit-transition: all .4s ease-in-out;

  -moz-transition: all .4s ease-in-out;

  -o-transition: all .4s ease-in-out;

  transition: all .4s ease-in-out;

  display: block;

}



.blog-description p{

  text-align: justify;

  font-size: 14px;

}

.blog-description h2 {

  margin: 20px 0;

}





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

  .block {

    background-color: blue;

    width: 50%;

  }

  .block:first-child {

    width: 50%;

    background-color: blue;

    clear: both;

  }

  .block:last-child {

    width: 50%;

    background-color: blue;

    clear: both;

  }

  .blog-bg-container {

  width: 355px;

  height: 300px;

  background-color: #e3e3e3;

  position: relative;

  overflow: hidden;

}

 .blog-description p{

  font-size: 13px;

}

}

@media screen and (max-width: 640px) and (max-width: 320px) {

  .block {

    width: 98%;

  }



  .blog-description p{

  font-size: 12px;

}

}