<?php
$places = [
    [
        'img' => '/img/ct-1.png', 
        'title' => 'Noida extension', 
        'name' => '43 Properties', 
    ],
    [
        'img' => '/img/ct-2.png', 
        'title' => 'Noida', 
        'name' => '35 Properties', 
    ],
    [
        'img' => '/img/ct-3.png', 
        'title' => 'Greater Noida', 
        'name' => '42 Properties', 
    ],
    [
        'img' => '/img/ct-4.png', 
        'title' => 'Yamuna Expressway', 
        'name' => '47 Properties', 
    ],
    [
        'img' => '/img/ct-5.png', 
        'title' => 'NH-24', 
        'name' => '17 Properties', 
    ],
    [
        'img' => '/img/ct-6.png', 
        'title' => 'New delhi', 
        'name' => '37 Properties', 
    ],
    [
        'img' => '/img/ct-7.png', 
        'title' => 'Gurgaon', 
        'name' => '32 Properties', 
    ],
    [
        'img' => '/img/ct-8.png', 
        'title' => 'Dwarka Expressway', 
        'name' => '26 Properties', 
    ],
    [
        'img' => '/img/ct-9.png', 
        'title' => 'Faridabad', 
        'name' => '18 Properties', 
    ],
    [
        'img' => '/img/ct-10.png', 
        'title' => 'Rishikesh', 
        'name' => '12 Properties', 
    ],
    [
        'img' => '/img/ct-11.png', 
        'title' => 'Haridwar', 
        'name' => '22 Properties', 
    ],
    [
        'img' => '/img/ct-12.png', 
        'title' => 'Goa', 
        'name' => '15 Properties', 
    ],
    
    [
        'img' => '/img/ct-13.png', 
        'title' => 'Dhulera', 
        'name' => '13 Properties', 
    ]
];
?>
<style>
@media (max-width: 767px) {
    .row.row-cols-1 > .col,
    .row > .col {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .col a.d-flex {
        padding: 6px 6px !important;
        align-items: center !important;
    }
    .img-fluid.circle {
        width: 40px;
    }
    .explod-caps h5 {
        font-size: 0.7rem !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.2 !important;
    }
    .explod-caps p {
        font-size: 0.7rem !important;
        margin: 0 !important;
        color: #6c757d !important
    }
}
</style>
<?php foreach ($places as $item): ?>
<!-- Single Package -->
<div class="col">
    <div class="position-relative">
        <a href="grid-layout-with-sidebar.php" class="d-flex align-items-center justify-content-start border rounded-pill p-2">
            <div class="explod-thumb flex-shrink-0">
                <img src="<?php echo $static_url, $item['img']; ?>" class="img-fluid circle" width="65" alt="">
            </div>
            <div class="explod-caps ps-lg-3 ps-2">
                <h5 class="fs-5 fw-medium mb-0"><?php echo $item['title']; ?></h5>
                <p class="text-muted-2 fs-sm m-0"><?php echo $item['name']; ?></p>
            </div>
        </a>
    </div>
</div>
<?php endforeach; ?>
