* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  
  .clearfix:after {
    content: "";
    display: table;
    clear: both; }
  
  a {
    text-decoration: none;
    color: inherit; }
  
  .container {
    font-family: 'Roboto', sans-serif;
    line-height: 22px; 
    width:100%}
  
  .card {
    border: 1px solid #c3c3c3;
    padding: 15px;
    background-color: white; }
    @media (max-width: 576px) {
      .card {
        width: 90%;
        margin: 10px 0; } }
    @media (min-width: 577px) {
      .card {
        width: 40%;
        margin: 10px 2%; } }
    @media (min-width: 768px) {
      .card {
        width: 30%;
        margin: 10px .8%; } }
    @media (min-width: 992px) {
      .card {
        width: 22%;
        margin: 10px .9%; } }
    .card .head {
      position: relative; }
      .card .head .category {
        position: absolute;
        left: 6px;
        top: 5px;
        border: 1px solid black;
        padding: 1px 7px;
        background-color: #F09A75;
        color: white;
        font-size: 11px;
        font-weight: bold; }
      .card .head img {
        width: 100%;
        max-height: 300px; }
    .card .details .title {
      margin: 5px 0 0; }
    .card .details .excerpt {
      margin: 10px 0;
      color: #777; }
    .card .foot .read-more-btn {
      background-color: #28292E;
      color: #EDE9D9;
      padding: 3px 7px; }
    .card .foot .comments-count {
      margin-top: 4px;
      float: right; }
      .card .details .nyanya {
        font-size:0.8em;
        font-family: Candara,Calibri,Segoe,Segoe UI,Optima,Arial,sans-serif;}