CSS Code

.grid-col {grid-template-columns: repeat(3,1fr);display: grid;}

.grid-col .post:nth-child(n+2) {margin: 10px;}

.grid-col section:nth-child(1) img {height: 205px;object-fit: cover;object-position: top;}

.grid-col img {width: 100%}

.grid-col section:nth-child(1) {grid-column: 1 / -1;}

.grid-col section:nth-child(n+2) img, .ofc {height: 105px;object-fit: cover;}

.grid-col section:nth-child(n+2) .post-title,.grid-col section:nth-child(n+2) .byline, .grid-col section:nth-child(n+2) .date {display: none;}

.ov-img, .ov-title {grid-row: 1 / -1;}

.ov-img {grid-column: 1 / -1;}

.ov-title {grid-column: 1 / -1;align-self: self-end;padding: 10px 15px;overflow: hidden;}

.grid-col section:nth-child(1) .ov-title {background: linear-gradient(to bottom,#0000,#000);}

.item-thumbnail {position: relative;display: grid;}

.item-thumbnail:hover img {filter: brightness(50%);transition: .2s}

.PopularPosts{counter-reset: section;}

.grid-col section .counter::before {counter-increment: section;content: counter(section);position: absolute;top: 6px;left: 4px;background: #FF6347;color: white;padding: 3px 7px;font-size: 13px;border-radius: 3px;}

.PopularPosts .post-title {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}

.PopularPosts a,.genre-date{color: white;text-decoration: none;font-weight: 500}

.genre-date {font-size: 14px;}

.widget-title {display: flex;justify-content: space-between;align-items: center}

.view-all {background: #FF6347;text-transform: uppercase;font-size: 9px;padding: 3px 6px;border-radius: 2px;}

HTML CODE

<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts' version='2' visible='true'>

      <b:widget-settings>

        <b:widget-setting name='numItemsToShow'>10</b:widget-setting>

        <b:widget-setting name='showThumbnails'>true</b:widget-setting>

        <b:widget-setting name='showSnippets'>true</b:widget-setting>

        <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>

      </b:widget-settings>

      <b:includable id='main' var='this'>

  <div class='widget-title'>

  <b:include name='widget-title'/>

          <a class='view-all' href=''>View All</a>

        </div>

  <div class='widget-content'>

    <b:include name='snippetedPosts'/>

  </div>

</b:includable>

      <b:includable id='postLabels'>

  <span class='byline post-labels'>

    <span class='byline-label'>Genre: </span>

    <b:loop index='i' values='data:post.labels' var='label'>

      <a expr:href='data:label.url' rel='tag'>

        <data:label.name/>

      </a>,

    </b:loop>

  </span>

</b:includable>

      <b:includable id='snippetedPostContent'>

  <div class='post-content'>

    <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>

  </div>

</b:includable>

      <b:includable id='snippetedPostThumbnail'>

  <div class='item-thumbnail relative overlay'>

    <a class='block ov-img b-img' expr:href='data:post.url'>

      <b:include data='{                         image: data:post.featuredImage,                         imageSizes: [172, 244],                         imageRatio: &quot;1:2&quot;,                         sourceSizes: &quot;272px&quot;                        }' name='responsiveImage'/>

      <span class='counter'/>

    </a>

    <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>

  </div>

</b:includable>

      <b:includable id='snippetedPostTitle'>

  <b:if cond='data:post.title != &quot;&quot;'>

    <div class='ov-title'>

    <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

    <div class='genre-date'>

      <b:include name='postLabels'/>

      <div class='date mt-5'><data:post.date/></div>

      </div>

    </div>

  </b:if>

</b:includable>

      <b:includable id='snippetedPosts'>

  <div class='grid-col' role='feed'>

    <!-- Don't render the post that we're currently already looking at. -->

    <b:loop values='data:posts filter (p =&gt; p.id != data:view.postId)' var='post'>

      <section class='post' role='article'>

        <b:include name='snippetedPostContent'/>

      </section>

    </b:loop>

  </div>

</b:includable>

    </b:widget>