Block 9 - on 2 columns
<!--Block start-->
<div class="block-area">
<!--block title-->
<div class="block-title-6">
<h4 class="h5 border-primary">
<span class="bg-primary text-white">Sports</span>
</h4>
</div>
<div class="row">
<!--Post start-->
<article class="col-sm-6 col-md-12 col-lg-6">
<div class="card card-full mb-module hover-a text-center">
<!--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>
<!-- title & date -->
<div class="mx-4 mt-minus position-relative bg-themes p-3 shadow-lrb-lg border-bottom rounded">
<h4 class="h5 h3-md h5-lg"><a href="#">The 2019 Nautilus: Lincoln's Cadillac Super Cruise fighter?</a></h4>
<div class="text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
</div>
</div>
</div>
</article>
<!--Post start-->
<article class="col-sm-6 col-md-12 col-lg-6">
<div class="card card-full mb-module hover-a text-center">
<!--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>
<!-- title & date -->
<div class="mx-4 mt-minus position-relative bg-themes p-3 shadow-lrb-lg border-bottom rounded">
<h4 class="h5 h3-md h5-lg"><a href="#">Cadillac to expand V-series performance subbrand</a></h4>
<div class="text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
</div>
</div>
</div>
</article>
<!--Post start-->
<article class="col-sm-6 col-md-12 col-lg-6">
<div class="card card-full mb-module hover-a text-center">
<!--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>
<!-- title & date -->
<div class="mx-4 mt-minus position-relative bg-themes p-3 shadow-lrb-lg border-bottom rounded">
<h4 class="h5 h3-md h5-lg"><a href="#">Hyundai Capital moves to foreclose on stores owned by ex-NFL players</a></h4>
<div class="text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
</div>
</div>
</div>
</article>
<!--Post start-->
<article class="col-sm-6 col-md-12 col-lg-6">
<div class="card card-full mb-module hover-a text-center">
<!--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>
<!-- title & date -->
<div class="mx-4 mt-minus position-relative bg-themes p-3 shadow-lrb-lg border-bottom rounded">
<h4 class="h5 h3-md h5-lg"><a href="#">With turnaround complete, Pininfarina bets on engineering, design</a></h4>
<div class="text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
</div>
</div>
</div>
</article>
</div>
<!--End post-->
<div class="gap-0"></div>
</div>
<!--End Block-->
Block 9 with custom color
This block component is same like block content 9, just add block color in block-area classes
<!-- Block start -->
<div class="block-area block-info">
....
....
</div>
<!--End Block-->
<!--Block start-->
<div class="block-area">
<!--block title-->
<div class="block-title-6">
<h4 class="h5 border-primary">
<span class="bg-primary text-white">Sports</span>
</h4>
</div>
<div class="row">
<!--Post start-->
<article class="col-sm-6 col-md-12">
<div class="card card-full mb-module hover-a text-center">
<!--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>
<!-- title & date -->
<div class="mx-4 mt-minus position-relative bg-themes p-3 shadow-lrb-lg border-bottom rounded">
<h4 class="h5"><a href="#">The 2019 Nautilus: Lincoln's Cadillac Super Cruise fighter?</a></h4>
<div class="text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
</div>
</div>
</div>
</article>
<!--Post start-->
<article class="col-sm-6 col-md-12">
<div class="card card-full mb-module hover-a text-center">
<!--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>
<!-- title & date -->
<div class="mx-4 mt-minus position-relative bg-themes p-3 shadow-lrb-lg border-bottom rounded">
<h4 class="h5"><a href="#">Cadillac to expand V-series performance subbrand</a></h4>
<div class="text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
</div>
</div>
</div>
</article>
<!--Post start-->
<article class="col-sm-6 col-md-12">
<div class="card card-full mb-module hover-a text-center">
<!--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>
<!-- title & date -->
<div class="mx-4 mt-minus position-relative bg-themes p-3 shadow-lrb-lg border-bottom rounded">
<h4 class="h5"><a href="#">Hyundai Capital moves to foreclose on stores owned by ex-NFL players</a></h4>
<div class="text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
</div>
</div>
</div>
</article>
<!--Post start-->
<article class="col-sm-6 col-md-12">
<div class="card card-full mb-module hover-a text-center">
<!--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>
<!-- title & date -->
<div class="mx-4 mt-minus position-relative bg-themes p-3 shadow-lrb-lg border-bottom rounded">
<h4 class="h5"><a href="#">With turnaround complete, Pininfarina bets on engineering, design</a></h4>
<div class="text-muted small">
<time datetime="2019-10-21">October 21, 2018</time>
</div>
</div>
</div>
</article>
</div>
<!--End post-->
<div class="gap-0"></div>
</div>
<!--End Block-->