@extends('layouts.landing', ['title' => 'Blog List View'])

@section('content')
    @include('layouts.partials/offcanvas')

    @include('layouts.partials/navbar', ['wishlist' => true])

    <main class="content-wrapper">

        <!-- Breadcrumb -->
        <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Blog</li>
            </ol>
        </nav>


        <!-- Page title -->
        <h1 class="h3 container mb-4">Our blog</h1>


        <!-- Featured posts -->
        <section class="container pb-5">
            <div class="row gy-5 pb-5">

                <!-- Article -->
                <article class="col-md-6">
                    <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="{{ route('second', ['blog', 'single-v1']) }}"
                        style="--cz-aspect-ratio: calc(500 / 636 * 100%)">
                        <img src="/img/blog/list/01.jpg" class="hover-effect-target" alt="Image">
                    </a>
                    <div class="pt-4">
                        <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                            <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gadget reviews</a>
                            <hr class="vr my-1 mx-1">
                            <span class="text-body-tertiary fs-xs">October 13, 2024</span>
                        </div>
                        <h3 class="h5 mb-0">
                            <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Discover how to maximize your
                                productivity with these essential tech gadgets designed for the modern home office</a>
                        </h3>
                    </div>
                </article>
                <div class="col-md-6">
                    <div class="row row-cols-1 row-cols-sm-2 gy-5">

                        <!-- Article -->
                        <article class="col">
                            <a class="ratio ratio-1x1 d-flex hover-effect-scale rounded overflow-hidden"
                                href="{{ route('second', ['blog', 'single-v1']) }}">
                                <img src="/img/blog/list/02.jpg" class="hover-effect-target" alt="Image">
                            </a>
                            <div class="pt-4">
                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Tech news</a>
                                    <hr class="vr my-1 mx-1">
                                    <span class="text-body-tertiary fs-xs">October 10, 2024</span>
                                </div>
                                <h3 class="h5 mb-0">
                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">News and views on the
                                        latest electronic products</a>
                                </h3>
                            </div>
                        </article>

                        <!-- Article -->
                        <article class="col">
                            <a class="ratio ratio-1x1 d-flex hover-effect-scale rounded overflow-hidden"
                                href="{{ route('second', ['blog', 'single-v1']) }}">
                                <img src="/img/blog/list/03.jpg" class="hover-effect-target" alt="Image">
                            </a>
                            <div class="pt-4">
                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">IoT</a>
                                    <hr class="vr my-1 mx-1">
                                    <span class="text-body-tertiary fs-xs">September 17, 2024</span>
                                </div>
                                <h3 class="h5 mb-0">
                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Transform your home into a
                                        smart hub with the latest IoT</a>
                                </h3>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
            <hr class="my-0 my-md-2 my-lg-4">
        </section>


        <!-- Posts list + Sidebar -->
        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
            <div class="row">

                <!-- Posts list -->
                <div class="col-lg-8">
                    <div class="d-flex flex-column gap-4 mt-n3">

                        <!-- Article -->
                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
                            <div class="col-sm-5 pe-sm-4">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
                                    <img src="/img/blog/list/04.jpg" class="hover-effect-target" alt="Image">
                                </a>
                            </div>
                            <div class="col-sm-7">
                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Tech tips</a>
                                    <hr class="vr my-1 mx-1">
                                    <span class="text-body-tertiary fs-xs">September 11, 2024</span>
                                </div>
                                <h3 class="h5 mb-2 mb-md-3">
                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Optimizing your workspace:
                                        The guide to an efficient and minimalist desk setup</a>
                                </h3>
                                <p class="mb-0">Creating an efficient and minimalist workspace is not just about
                                    decluttering, it's about cultivating an environment that...</p>
                            </div>
                        </article>

                        <!-- Article -->
                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
                            <div class="col-sm-5 pe-sm-4">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
                                    <img src="/img/blog/list/05.jpg" class="hover-effect-target" alt="Image">
                                </a>
                            </div>
                            <div class="col-sm-7">
                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Industry
                                        trends</a>
                                    <hr class="vr my-1 mx-1">
                                    <span class="text-body-tertiary fs-xs">September 5, 2024</span>
                                </div>
                                <h3 class="h5 mb-2 mb-md-3">
                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Exploring the skies: The
                                        rise of drone photography and videography</a>
                                </h3>
                                <p class="mb-0">In the dazzling realm of modern photography and videography, drones have
                                    soared beyond mere gadgets to become...</p>
                            </div>
                        </article>

                        <!-- Article -->
                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
                            <div class="col-sm-5 pe-sm-4">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
                                    <img src="/img/blog/list/06.jpg" class="hover-effect-target" alt="Image">
                                </a>
                            </div>
                            <div class="col-sm-7">
                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">IoT</a>
                                    <hr class="vr my-1 mx-1">
                                    <span class="text-body-tertiary fs-xs">August 23, 2024</span>
                                </div>
                                <h3 class="h5 mb-2 mb-md-3">
                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Connecting the dots: How
                                        IoT technology is transforming everyday life</a>
                                </h3>
                                <p class="mb-0">In the ever-evolving landscape of technology, the Internet of Things
                                    (IoT) stands out as a transformative force reshaping...</p>
                            </div>
                        </article>

                        <!-- Article -->
                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
                            <div class="col-sm-5 pe-sm-4">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
                                    <img src="/img/blog/list/07.jpg" class="hover-effect-target" alt="Image">
                                </a>
                            </div>
                            <div class="col-sm-7">
                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Buying
                                        guides</a>
                                    <hr class="vr my-1 mx-1">
                                    <span class="text-body-tertiary fs-xs">August 18, 2024</span>
                                </div>
                                <h3 class="h5 mb-2 mb-md-3">
                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">How to find the best
                                        deals and make secure transactions online</a>
                                </h3>
                                <p class="mb-0">This blog post will guide you through the dual objectives of snagging
                                    great bargains and protecting your financial...</p>
                            </div>
                        </article>

                        <!-- Article -->
                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
                            <div class="col-sm-5 pe-sm-4">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
                                    <img src="/img/blog/list/08.jpg" class="hover-effect-target" alt="Image">
                                </a>
                            </div>
                            <div class="col-sm-7">
                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gadget
                                        reviews</a>
                                    <hr class="vr my-1 mx-1">
                                    <span class="text-body-tertiary fs-xs">August 9, 2024</span>
                                </div>
                                <h3 class="h5 mb-2 mb-md-3">
                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Top 10 electric kitchen
                                        appliances for modern homes</a>
                                </h3>
                                <p class="mb-0">Creating an efficient and stylish kitchen is a priority for many
                                    homeowners. With the rise of technology, the modern home...</p>
                            </div>
                        </article>
                    </div>


                    <!-- Contributors' posts slider -->
                    <div class="py-5 my-1 my-sm-2 my-md-3 my-lg-4 my-xl-5">
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <h2 class="h3 mb-0">Charitable contributions</h2>
                            <div class="d-flex gap-2">
                                <button type="button" id="prev-post"
                                    class="btn btn-prev btn-icon btn-outline-secondary rounded-circle animate-slide-start me-1"
                                    aria-label="Prev">
                                    <i class="ci-chevron-left fs-lg animate-target"></i>
                                </button>
                                <button type="button" id="next-post"
                                    class="btn btn-next btn-icon btn-outline-secondary rounded-circle animate-slide-end"
                                    aria-label="Next">
                                    <i class="ci-chevron-right fs-lg animate-target"></i>
                                </button>
                            </div>
                        </div>
                        <div class="row row-cols-1 row-cols-md-2 g-0 overflow-hidden rounded-5">

                            <!-- Binded images (controlled slider) -->
                            <div class="col order-md-2 user-select-none">
                                <div class="swiper h-100" id="images"
                                    data-swiper='{
                    "allowTouchMove": false,
                    "loop": true,
                    "effect": "fade"
                  }'>
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="ratio ratio-16x9"></div>
                                            <img src="/img/blog/grid/v1/slider01.jpg"
                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
                                                alt="Image">
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="ratio ratio-16x9"></div>
                                            <img src="/img/blog/grid/v1/slider02.jpg"
                                                class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
                                                alt="Image">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Text slider -->
                            <div class="col bg-dark order-md-1 py-5 px-4 px-sm-5" data-bs-theme="dark">
                                <div class="swiper py-sm-2 py-md-3 my-xl-2 my-xxl-3"
                                    data-swiper='{
                    "spaceBetween": 40,
                    "loop": true,
                    "speed": 400,
                    "controlSlider": "#images",
                    "navigation": {
                      "prevEl": "#prev-post",
                      "nextEl": "#next-post"
                    }
                  }'>
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <h3 class="h5">The role of philanthropy in building a better world</h3>
                                            <p class="text-body fs-sm pb-4">Charitable contributions are a vital aspect of
                                                building a better world. These contributions come in various forms,
                                                including monetary donations, volunteering time, providing expertise...</p>
                                            <a class="btn btn-outline-light" href="{{ route('second', ['blog', 'single-v1']) }}">Read more</a>
                                        </div>
                                        <div class="swiper-slide">
                                            <h3 class="h5">Supporting communities through charitable giving</h3>
                                            <p class="text-body fs-sm pb-4">Join us on a journey of generosity as we
                                                spotlight the transformative power of charitable contributions. In this
                                                section, we celebrate the stories of impact made possible by your...</p>
                                            <a class="btn btn-outline-light" href="{{ route('second', ['blog', 'single-v1']) }}">Read more</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- Posts list -->
                    <div class="d-flex flex-column gap-4 mt-n3 pb-2 pb-sm-0">

                        <!-- Article -->
                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
                            <div class="col-sm-5 pe-sm-4">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
                                    <img src="/img/blog/list/09.jpg" class="hover-effect-target" alt="Image">
                                </a>
                            </div>
                            <div class="col-sm-7">
                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gaming</a>
                                    <hr class="vr my-1 mx-1">
                                    <span class="text-body-tertiary fs-xs">July 27, 2024</span>
                                </div>
                                <h3 class="h5 mb-2 mb-md-3">
                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Immersive worlds: A dive
                                        into the latest VR gear and experiences</a>
                                </h3>
                                <p class="mb-0">Immersive worlds have always captured the imagination, but now, with the
                                    advent of advanced VR gear, they are becoming...</p>
                            </div>
                        </article>

                        <!-- Article -->
                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
                            <div class="col-sm-5 pe-sm-4">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
                                    <img src="/img/blog/list/10.jpg" class="hover-effect-target" alt="Image">
                                </a>
                            </div>
                            <div class="col-sm-7">
                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Tech news</a>
                                    <hr class="vr my-1 mx-1">
                                    <span class="text-body-tertiary fs-xs">July 16, 2024</span>
                                </div>
                                <h3 class="h5 mb-2 mb-md-3">
                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Tap, pay, and go:
                                        Simplifying transactions with mobile payment solutions</a>
                                </h3>
                                <p class="mb-0">In today's fast-paced world, the way we handle transactions is evolving
                                    rapidly, and mobile payment solutions are at the...</p>
                            </div>
                        </article>

                        <!-- Article -->
                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
                            <div class="col-sm-5 pe-sm-4">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
                                    <img src="/img/blog/list/11.jpg" class="hover-effect-target" alt="Image">
                                </a>
                            </div>
                            <div class="col-sm-7">
                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Product
                                        reviews</a>
                                    <hr class="vr my-1 mx-1">
                                    <span class="text-body-tertiary fs-xs">June 27, 2024</span>
                                </div>
                                <h3 class="h5 mb-2 mb-md-3">
                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">Future engineers start
                                        young: A review of the latest robotic kit for kids</a>
                                </h3>
                                <p class="mb-0">The world of technology constantly evolves, and fostering a love for
                                    innovation and engineering in young minds has never been...</p>
                            </div>
                        </article>

                        <!-- Article -->
                        <article class="row align-items-start align-items-md-center gx-0 gy-4 pt-3">
                            <div class="col-sm-5 pe-sm-4">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden flex-md-shrink-0"
                                    href="{{ route('second', ['blog', 'single-v1']) }}" style="--cz-aspect-ratio: calc(226 / 306 * 100%)">
                                    <img src="/img/blog/list/12.jpg" class="hover-effect-target" alt="Image">
                                </a>
                            </div>
                            <div class="col-sm-7">
                                <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                    <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Buying
                                        guides</a>
                                    <hr class="vr my-1 mx-1">
                                    <span class="text-body-tertiary fs-xs">June 19, 2024</span>
                                </div>
                                <h3 class="h5 mb-2 mb-md-3">
                                    <a class="hover-effect-underline" href="{{ route('second', ['blog', 'single-v1']) }}">A detailed guide to the
                                        latest smartphones on the market</a>
                                </h3>
                                <p class="mb-0">Keeping pace with the ever-evolving world of smartphones is a challenge
                                    for consumers and tech enthusiasts alike...</p>
                            </div>
                        </article>
                    </div>
                    <hr class="mt-4 mt-sm-5">

                    <!-- Pagination -->
                    <nav aria-label="Blog pages">
                        <ul class="pagination pagination-lg">
                            <li class="page-item active" aria-current="page">
                                <span class="page-link">
                                    1
                                    <span class="visually-hidden">(current)</span>
                                </span>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">2</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">3</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">4</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">5</a>
                            </li>
                        </ul>
                    </nav>
                </div>


                <!-- Sticky sidebar that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
                <aside class="col-lg-4 col-xl-3 offset-xl-1" style="margin-top: -115px">
                    <div class="offcanvas-lg offcanvas-end sticky-lg-top ps-lg-4 ps-xl-0" id="blogSidebar">
                        <div class="d-none d-lg-block" style="height: 115px"></div>
                        <div class="offcanvas-header py-3">
                            <h5 class="offcanvas-title">Sidebar</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                data-bs-target="#blogSidebar" aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body d-block pt-2 py-lg-0">
                            <h4 class="h6 mb-4">Blog categories</h4>
                            <div class="d-flex flex-wrap gap-3">
                                <a class="btn btn-outline-secondary px-3" href="#!">Gadget reviews</a>
                                <a class="btn btn-outline-secondary px-3" href="#!">Tech news</a>
                                <a class="btn btn-outline-secondary px-3" href="#!">Industry trends</a>
                                <a class="btn btn-outline-secondary px-3" href="#!">Buying guides</a>
                                <a class="btn btn-outline-secondary px-3" href="#!">Tech tips</a>
                                <a class="btn btn-outline-secondary px-3" href="#!">Gaming</a>
                                <a class="btn btn-outline-secondary px-3" href="#!">IoT</a>
                            </div>
                            <h4 class="h6 pt-5 mb-0">Trending posts</h4>
                            <article
                                class="hover-effect-scale position-relative d-flex align-items-center border-bottom py-4">
                                <div class="w-100 pe-3">
                                    <h3 class="h6 lh-base fs-sm mb-0">
                                        <a class="hover-effect-underline stretched-link" href="{{ route('second', ['blog', 'single-v1']) }}">The
                                            role of philanthropy in building a better world</a>
                                    </h3>
                                </div>
                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
                                    <img src="/img/blog/grid/v1/th01.jpg" class="rounded-2" alt="Image">
                                </div>
                            </article>
                            <article
                                class="hover-effect-scale position-relative d-flex align-items-center border-bottom py-4">
                                <div class="w-100 pe-3">
                                    <h3 class="h6 lh-base fs-sm mb-0">
                                        <a class="hover-effect-underline stretched-link" href="{{ route('second', ['blog', 'single-v1']) }}">The
                                            biggest prospects for the smart home electronics industry</a>
                                    </h3>
                                </div>
                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
                                    <img src="/img/blog/grid/v1/th02.jpg" class="rounded-2" alt="Image">
                                </div>
                            </article>
                            <article class="hover-effect-scale position-relative d-flex align-items-center py-4">
                                <div class="w-100 pe-3">
                                    <h3 class="h6 lh-base fs-sm mb-0">
                                        <a class="hover-effect-underline stretched-link"
                                            href="{{ route('second', ['blog', 'single-v1']) }}">Behind-the-scenes stories from the world of
                                            iPhones</a>
                                    </h3>
                                </div>
                                <div class="ratio w-100" style="max-width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
                                    <img src="/img/blog/grid/v1/th03.jpg" class="rounded-2" alt="Image">
                                </div>
                            </article>
                            <h4 class="h6 pt-4">Follow us</h4>
                            <div class="d-flex gap-2 pb-2">
                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                    data-bs-toggle="tooltip"
                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                                    title="Instagram" aria-label="Follow us on Instagram">
                                    <i class="ci-instagram"></i>
                                </a>
                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                    data-bs-toggle="tooltip"
                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                                    title="X (Twitter)" aria-label="Follow us on X">
                                    <i class="ci-x"></i>
                                </a>
                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                    data-bs-toggle="tooltip"
                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                                    title="Facebook" aria-label="Follow us on Facebook">
                                    <i class="ci-facebook"></i>
                                </a>
                                <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                    data-bs-toggle="tooltip"
                                    data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                                    title="Telegram" aria-label="Follow us on Telegram">
                                    <i class="ci-telegram"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>
        </section>


        <!-- Video reviews -->
        <section class="container pb-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">

            <!-- Heading -->
            <div class="d-flex align-items-center justify-content-between pb-2 pb-sm-3 mb-3">
                <h2 class="h3 mb-0">Video reviews</h2>
                <div class="nav ms-3">
                    <a class="nav-link animate-underline px-0 py-2" href="#!">
                        <span class="animate-target">View all</span>
                        <i class="ci-chevron-right fs-base ms-1"></i>
                    </a>
                </div>
            </div>

            <!-- Video cards that turn into slider on screens < 992px wide (lg breakpoint) -->
            <div class="swiper"
                data-swiper='{
          "slidesPerView": 1,
          "spaceBetween": 24,
          "pagination": {
            "el": ".swiper-pagination",
            "clickable": true
          },
          "breakpoints": {
            "500": {
              "slidesPerView": 2
            },
            "768": {
              "slidesPerView": 3
            },
            "992": {
              "slidesPerView": 4
            }
          }
        }'>
                <div class="swiper-wrapper">

                    <!-- Article -->
                    <article class="swiper-slide hover-effect-scale">
                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
                            <div
                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
                                <i class="ci-play fs-base"></i>
                            </div>
                            <img src="/img/blog/grid/v1/video01.jpg" class="hover-effect-target" alt="Image">
                        </div>
                        <div class="pt-3 mt-1">
                            <div class="text-body-tertiary fs-xs mb-2">06:12</div>
                            <h3 class="h6 mb-0">
                                <a class="hover-effect-underline stretched-link" href="#!">A comprehensive review of
                                    the latest kitchen blenders on the market</a>
                            </h3>
                        </div>
                    </article>

                    <!-- Article -->
                    <article class="swiper-slide hover-effect-scale">
                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
                            <div
                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
                                <i class="ci-play fs-base"></i>
                            </div>
                            <img src="/img/blog/grid/v1/video04.jpg" class="hover-effect-target" alt="Image">
                        </div>
                        <div class="pt-3 mt-1">
                            <div class="text-body-tertiary fs-xs mb-2">10:08</div>
                            <h3 class="h6 mb-0">
                                <a class="hover-effect-underline stretched-link" href="#!">Behind-the-scenes stories
                                    from the world of iPhones</a>
                            </h3>
                        </div>
                    </article>

                    <!-- Article -->
                    <article class="swiper-slide hover-effect-scale">
                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
                            <div
                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
                                <i class="ci-play fs-base"></i>
                            </div>
                            <img src="/img/blog/grid/v1/video02.jpg" class="hover-effect-target" alt="Image">
                        </div>
                        <div class="pt-3 mt-1">
                            <div class="text-body-tertiary fs-xs mb-2">04:56</div>
                            <h3 class="h6 mb-0">
                                <a class="hover-effect-underline stretched-link" href="#!">Exploring the latest best
                                    smartwatch features for busy professionals</a>
                            </h3>
                        </div>
                    </article>

                    <!-- Article -->
                    <article class="swiper-slide hover-effect-scale">
                        <div class="ratio rounded overflow-hidden" style="--cz-aspect-ratio: calc(200 / 306 * 100%)">
                            <div
                                class="btn btn-icon btn-light position-absolute top-50 start-50 translate-middle z-2 rounded-circle pe-none">
                                <i class="ci-play fs-base"></i>
                            </div>
                            <img src="/img/blog/grid/v1/video03.jpg" class="hover-effect-target" alt="Image">
                        </div>
                        <div class="pt-3 mt-1">
                            <div class="text-body-tertiary fs-xs mb-2">03:27</div>
                            <h3 class="h6 mb-0">
                                <a class="hover-effect-underline stretched-link" href="#!">Taking to the skies with
                                    the latest compact drone technology</a>
                            </h3>
                        </div>
                    </article>
                </div>

                <!-- Pagination (Bullets) -->
                <div class="swiper-pagination position-static mt-4"></div>
            </div>
        </section>
    </main>

    @include('layouts.partials/footer')
@endsection

@section('scripts')
@endsection