<!--Block start-->
<div class="block-area">
  <!--block title-->
  <div class="block-title-6">
    <h4 class="h5 border-primary">
      <span class="bg-primary text-white">Popular news</span>
    </h4>
  </div>
  <div class="row">
    <!--big post-->
    <div class="col-md-4">
      <div class="card card-full hover-a mb-5 mb-md-0">
        <!--thumbnail-->
        <div class="ratio_337-337 image-wrapper">
          <a href="#">
            <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/337x337/img1.jpg" alt="Image description">
          </a>
        </div>
        <div class="card-body">
          <!-- author, date & comments -->
          <div class="card-text mb-2 text-muted small">
            <span class="d-none d-sm-inline me-1">
              <a class="fw-bold" href="#">John Doe</a>
            </span>
            <time datetime="2019-10-22">Oct 22, 2019</time>
            <span title="9 comment" class="float-end">
              <span class="icon-comments"></span> 9
            </span>
          </div>
          <!--title-->
          <h2 class="card-title h3 h1-sm h3-md h1-lg">
            <a href="#">Ferrari improves painting process so perfect</a>
          </h2>
        </div>
      </div>
    </div>
    <!-- small post -->
    <div class="col-md-8">
      <div class="row">
        <!-- post start -->
        <article class="col-6 col-sm-4">
          <div class="card card-full mb-4 hover-a">
            <!--thumbnail-->
            <div class="ratio_360-202 image-wrapper">
              <a href="#">
                <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img1.jpg" alt="Image description">
              </a>
            </div>
            <div class="card-body">
              <!--title-->
              <h2 class="card-title h5">
                <a href="#">GB's Bankes wins snowboard cross silver at World Champs</a>
              </h2>
              <!-- date & comments -->
              <div class="card-text mb-2 text-muted small">
                <time datetime="2019-10-22">Oct 22, 2019</time>
                <span title="9 comment" class="float-end">
                  <span class="icon-comments"></span> 9
                </span>
              </div>
            </div>
          </div>
        </article>
        <!-- post start -->
        <article class="col-6 col-sm-4">
          <div class="card card-full mb-4 hover-a">
            <!--thumbnail-->
            <div class="ratio_360-202 image-wrapper">
              <a href="#">
                <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img2.jpg" alt="Image description">
              </a>
            </div>
            <div class="card-body">
              <!--title-->
              <h2 class="card-title h5">
                <a href="#">Back From the Dead, Parma Embraces a Football School arena</a>
              </h2>
              <!-- date & comments -->
              <div class="card-text mb-2 text-muted small">
                <time datetime="2019-10-22">Oct 22, 2019</time>
                <span title="9 comment" class="float-end">
                  <span class="icon-comments"></span> 9
                </span>
              </div>
            </div>
          </div>
        </article>
        <!-- post start -->
        <article class="col-6 col-sm-4">
          <div class="card card-full mb-4 hover-a">
            <!--thumbnail-->
            <div class="ratio_360-202 image-wrapper">
              <a href="#">
                <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img3.jpg" alt="Image description">
              </a>
            </div>
            <div class="card-body">
              <!--title-->
              <h2 class="card-title h5">
                <a href="#">How NBA players reacted to the shocking Kristaps Porzingis trade</a>
              </h2>
              <!-- date & comments -->
              <div class="card-text mb-2 text-muted small">
                <time datetime="2019-10-22">Oct 22, 2019</time>
                <span title="9 comment" class="float-end">
                  <span class="icon-comments"></span> 9
                </span>
              </div>
            </div>
          </div>
        </article>
        <!-- post start -->
        <article class="col-6 col-sm-4">
          <div class="card card-full mb-4 hover-a">
            <!--thumbnail-->
            <div class="ratio_360-202 image-wrapper">
              <a href="#">
                <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img4.jpg" alt="Image description">
              </a>
            </div>
            <div class="card-body">
              <!--title-->
              <h2 class="card-title h5">
                <a href="#">Bowen's Super Bowl LIII game plans: Which defense will get stops?</a>
              </h2>
              <!-- date & comments -->
              <div class="card-text mb-2 text-muted small">
                <time datetime="2019-10-22">Oct 22, 2019</time>
                <span title="9 comment" class="float-end">
                  <span class="icon-comments"></span> 9
                </span>
              </div>
            </div>
          </div>
        </article>
        <!-- post start -->
        <article class="col-6 col-sm-4">
          <div class="card card-full mb-4 hover-a">
            <!--thumbnail-->
            <div class="ratio_360-202 image-wrapper">
              <a href="#">
                <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img5.jpg" alt="Image description">
              </a>
            </div>
            <div class="card-body">
              <!--title-->
              <h2 class="card-title h5">
                <a href="#">MotoGP: Which team needs what in 2019?</a>
              </h2>
              <!-- date & comments -->
              <div class="card-text mb-2 text-muted small">
                <time datetime="2019-10-22">Oct 22, 2019</time>
                <span title="9 comment" class="float-end">
                  <span class="icon-comments"></span> 9
                </span>
              </div>
            </div>
          </div>
        </article>
        <!-- post start -->
        <article class="col-6 col-sm-4">
          <div class="card card-full mb-4 hover-a">
            <!--thumbnail-->
            <div class="ratio_360-202 image-wrapper">
              <a href="#">
                <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img6.jpg" alt="Image description">
              </a>
            </div>
            <div class="card-body">
              <!--title-->
              <h2 class="card-title h5">
                <a href="#">Ferrari improves painting process so perfect</a>
              </h2>
              <!-- date & comments -->
              <div class="card-text mb-2 text-muted small">
                <time datetime="2019-10-22">Oct 22, 2019</time>
                <span title="9 comment" class="float-end">
                  <span class="icon-comments"></span> 9
                </span>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
    <!--end small post-->
  </div>
</div>
<!--End Block-->

<!-- Block start -->
<div class="block-area block-danger">
....
....
</div>
<!--End Block-->