<div class="container-fluid">
    <div class="row mt-md-n5 mt-5">
        <div class="col-md-2 col-sm-12 justify-content-center">
            <h3 class="wln-text-purple package-header">POPULAR PACKAGES</h3>
            <hr style="border: solid 2px #d66325; "/>
        </div>
        <div class="col-md-10 col-sm-12">
            <div class="card-deck owl-carousel owl-theme" id="sliding-cards-popular-packages">
                <?php foreach ($popular_packages as $package) { ?>
                <div class="card border-0 rounded-0 m-0 p-0 img-box">
                    <?php 
                        $image_result = $image_service->get($package->thumbnail);
                        $image = new Image(
                            $image_result['id'],
                            $image_result['caption'],
                            $image_result['filename']
                        ); 
                    ?>
                    <img src="assets/images/<?php echo $image->filename; ?>" class="card-img-top img-fluid package-img rounded-0">
                    <div class="overlay-image">
                        <a href="packages/<?php echo $package->url; ?>" class="btn btn-outline-none rounded-0 wln-white wln-text-orange overlay-btn"><strong>VIEW DESTINATION</strong></a>
                    </div>
                    <div class="overlay-text">
                        <div class="text"><?php echo $package->location; ?></div>
                    </div>
                </div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>