<!-- Hero -->
<div class="js-swiper-blog-metro-hero swiper">
<div class="swiper-wrapper">
<div class="swiper-slide d-lg-flex min-vh-lg-100 gradient-x-overlay-lg-dark bg-img-start content-space-5" style="background-image: url(../assets/img/1920x1080/img8.jpg);">
<!-- Container -->
<div class="container d-lg-flex align-items-lg-center">
<div class="w-lg-65 text-center mx-lg-auto">
<a class="text-cap text-white-70" href="#">Adventure</a>
<div class="4 mb-md-7">
<h1 class="text-white">The top 30 self-improvement goals we never get around to achieving</h1>
</div>
<a class="btn btn-light btn-transition" href="../blog-article.html">Read more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Container -->
</div>
<div class="swiper-slide d-lg-flex min-vh-lg-100 gradient-x-overlay-lg-dark bg-img-start content-space-5" style="background-image: url(../assets/img/1920x1080/img22.jpg);">
<!-- Container -->
<div class="container d-lg-flex align-items-lg-center">
<div class="w-lg-65 text-center mx-lg-auto">
<a class="text-cap text-white-70" href="#">Science</a>
<div class="mb-4 mb-md-7">
<h2 class="h1 text-white">Bonded by science: researchers describe their nerdy proposals</h2>
</div>
<a class="btn btn-light btn-transition" href="../blog-article.html">Read more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Container -->
</div>
<div class="swiper-slide d-lg-flex min-vh-lg-100 gradient-x-overlay-lg-dark bg-img-start content-space-5" style="background-image: url(../assets/img/1920x1080/img2.jpg);">
<!-- Container -->
<div class="container d-lg-flex align-items-lg-center">
<div class="w-lg-65 text-center mx-lg-auto">
<a class="text-cap text-white-70" href="#">Environment</a>
<div class="mb-4 mb-md-7">
<h2 class="h1 text-white">Tree rings reveal increased fire risk for southwestern US</h2>
</div>
<a class="btn btn-light btn-transition" href="../blog-article.html">Read more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Container -->
</div>
<div class="swiper-slide d-lg-flex min-vh-lg-100 gradient-x-overlay-lg-dark bg-img-start content-space-5" style="background-image: url(../assets/img/1920x1080/img7.jpg);">
<!-- Container -->
<div class="container d-lg-flex align-items-lg-center">
<div class="w-lg-65 text-center mx-lg-auto">
<a class="text-cap text-white-70" href="#">Lifestyle</a>
<div class="mb-4 mb-md-7">
<h2 class="h1 text-white">2020's Most Relaxing and Affordable Vacations</h2>
</div>
<a class="btn btn-light btn-transition" href="../blog-article.html">Read more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Container -->
</div>
</div>
<!-- Swiper Pagination -->
<div class="js-swiper-blog-metro-hero-pagination swiper-pagination swiper-pagination-light position-absolute bottom-0 start-0 end-0 mb-5"></div>
</div>
<!-- End Hero -->
<link rel="stylesheet" href="../assets/vendor/swiper/swiper-bundle.min.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var swiper = new Swiper('.js-swiper-blog-metro-hero',{
effect: 'fade',
autoplay: true,
loop: true,
pagination: {
el: '.js-swiper-blog-metro-hero-pagination',
clickable: true,
}
});
})()
</script>