Block 20 - 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">Hot news</span>
</h4>
</div>
<div class="row">
<!--left post-->
<div class="col-lg-6">
<!--post big start-->
<div class="big-post">
<article class="card card-full hover-a mb-4">
<!--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>
<!-- title & date -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<h4 class="card-title h2 h1-sm h3-lg">
<a class="text-white" href="#">Ferrari improves painting process so perfect</a>
</h4>
<div class="card-text small text-light">
<time datetime="2019-10-18">Oct 18, 2019</time>
</div>
</div>
</article>
</div>
<!--end post big-->
<!--post small start-->
<div class="small-post">
<!--post list-->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img21.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">Nissan's sports car strategy rests on the stable genius of GT-R</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-16">Oct 16, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!--post list-->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img22.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">Toyota Sienna rates marginal in passenger-side overlap crash test</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-15">Oct 15, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!--post list-->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img23.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">Ford reveals autonomous vehicle philosophies, priorities</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-14">Oct 14, 2019</time>
</div>
</div>
</div>
</div>
</article>
</div>
<!--end post small-->
</div>
<!--end left post-->
<!--right post-->
<div class="col-lg-6">
<!--post big start-->
<div class="big-post">
<article class="card card-full hover-a mb-4">
<!--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/img7.jpg" alt="Image description">
</a>
</div>
<!-- title & date -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<h4 class="card-title h2 h1-sm h3-lg">
<a class="text-white" href="#">Settling Arguments About Hydrogen With 168 Giant Lasers</a>
</h4>
<div class="card-text small text-light">
<time datetime="2019-10-18">Oct 18, 2019</time>
</div>
</div>
</article>
</div>
<!--end post big-->
<!--post small start-->
<div class="small-post">
<!--post list-->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img24.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">Hundreds of Reindeer Died by Lightning.</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-09">Oct 9, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!--post list-->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img25.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">Latest Attraction at French Theme Park: Crows That Pick Up Trash</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-07">Oct 7, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!--post list-->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img26.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">Offer Hints to How Dogs Became Domesticated</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-18">Oct 18, 2019</time>
</div>
</div>
</div>
</div>
</article>
</div>
<!--end post small-->
</div>
<!--end right post-->
</div>
</div>
<!--End Block-->
Block 20 - on 2 columns
This block component is same like block content 20, just add block color in block-area classes
<!-- Block start -->
<div class="block-area block-success">
....
....
</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">Automotive</span>
</h4>
</div>
<!--post big start-->
<div class="big-post">
<article class="card card-full hover-a mb-4">
<!--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>
<!-- title & date -->
<div class="position-absolute p-3 b-0 w-100 bg-shadow">
<h4 class="card-title h2 h1-sm h3-md">
<a class="text-white" href="#">Ferrari improves painting process so perfect</a>
</h4>
<div class="card-text small text-light">
<time datetime="2019-10-18">Oct 18, 2019</time>
</div>
</div>
</article>
</div>
<!--end post big-->
<!--post small start-->
<div class="small-post">
<!--post list-->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img21.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">Nissan's sports car strategy rests on the stable genius of GT-R</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-16">Oct 16, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!--post list-->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img22.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">Toyota Sienna rates marginal in passenger-side overlap crash test</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-15">Oct 15, 2019</time>
</div>
</div>
</div>
</div>
</article>
<!--post list-->
<article class="card card-full hover-a mb-4">
<div class="row">
<!--thumbnail-->
<div class="col-3 col-md-4 pe-2 pe-md-0">
<div class="ratio_115-80 image-wrapper">
<a href="#">
<img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/115x80/img23.jpg" alt="Image description">
</a>
</div>
</div>
<!-- title & date -->
<div class="col-9 col-md-8">
<div class="card-body pt-0">
<h3 class="card-title h6 h5-sm h6-lg">
<a href="#">Ford reveals autonomous vehicle philosophies, priorities</a>
</h3>
<div class="card-text small text-muted">
<time datetime="2019-10-14">Oct 14, 2019</time>
</div>
</div>
</div>
</div>
</article>
</div>
<!--end post small-->
<div class="gap-0"></div>
</div>
<!-- end block -->