<div class="card-container sm-gutter sm-brr">
     <div class="card__content">
         <div class="card__heading xs-gutter para-md semibold-weight">
             Black Panther
         </div>
         <div class="card__author xs-gutter para-sm">by Kurt Wagner</div>
     </div>
     <div class="card__info sm-gutter para-sm-xs">
         Visit ten places on our planet that are undergoing the biggest
         changes today.Lorem Ipsum is simply dummy text of the printing
         and typesetting industry.
     </div>
     <div class="card__actions sm-gutter">
         <div class="card__read para-sm-xs semibold-weight">
             <a href="">READ</a>
         </div>
         <div class="card__bookmark para-sm-xs semibold-weight">
             <a href="">BOOKMARK</a>
         </div>
         <div class="card__like">
             <a href=""><i class="fas fa-share-alt para-sm"></i></a>
         </div>
         <div class="card__share">
             <a href=""><i class="far fa-heart para-sm"></i></a>
         </div>
         <div class="card__vert">
             <a href=""><i class="fas fa-ellipsis-v para-sm"></i></a>
         </div>
     </div>
 </div>