.blog{
  margin-top: 75px;
  margin-bottom: 40px;
}
.blog-details{
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 3px 14px black;
  border-radius: 14px;
}
.post-img{
  overflow: hidden;
}
.post-img img{
  padding: 20px 20px 0px 20px;
}
.title{
  font-size: 28px;
  font-weight: 400;
  padding: 0;
  margin-top: 20px;
}
.meta-top ul{
  margin-top: 20px;
  padding-left: 0;
  margin-left: 0;
  display: flex;
}
.meta-top ul li:first-child{
  margin-left: 15px;
}
.meta-top ul li:last-child{
  margin-left: 10px;
}
.meta-top ul li i{
  margin-right: 4px;
  color: #3A81F4;
}
.meta-top ul li a{
  color: rgb(105, 102, 102);
  text-decoration: none;
}
.content{
  margin-top: 20px;
}
.meta-bottom {
  padding-top: 10px;
  border-top: 1px solid rgb(105, 102, 102);
}
.meta-bottom i {
  color: #6e6e6e;
  display: inline;
}
.meta-bottom a {
  color: #6e6e6e;
  transition: 0.3s;
}
.meta-bottom a:hover {
  color: #3A81F4;
}
.meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}
.meta-bottom .cats li {
  display: inline-block;
}
.meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}
.meta-bottom .tags li {
  display: inline-block;
}
.meta-bottom .tags li + li::before {
  padding-right: 6px;
  content: ",";
}
@media (max-width: 548px){
  .title{
    font-size: 24px;
  }
}
@media (max-width: 510px){
  .title{
    font-size: 20px;
  }
}
@media (max-width: 450px){
  .title{
    font-size: 17px;
  }
  .meta-top ul li a{
    font-size: 13px;
  }
  .meta-top ul li i{
    font-size: 13px;
  }
  .content p{
    font-size: 15px;
  }
  .post-img img{
    padding: 0;
  }
  .meta-top li{
    margin-left: 0;
  }
}
@media (max-width: 400px){
 .title{
   font-size: 14px;
 }
 .meta-top ul li a{
   font-size: 10px;
 }
 .meta-top ul li i{
   font-size: 10px;
 }
 .meta-top ul li:last-child{
   display: none;
 }
 .content p{
   font-size: 10px;
 }
}