<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
</html>
<?php 
/*
Template Name: Gallery
*/
get_header(); ?>
<div style="background-image: url(<?php echo esc_url(get_template_directory_uri()); ?>/images/bg/h.jpg);" class="gtco-section">
  <div class="gtco-container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 text-center gtco-heading">
        <h2 class="cursive-font primary-color">Our Gallery</h2>
      </div>
    </div>
    <div class="row">
      <?php 
      $images = get_field('gallery_image'); 
      foreach( $images as $image ): 
      ?>
      <div class="col-lg-4 col-md-4 col-sm-6">
        <a href="<?php echo $image; ?>" class="fh5co-card-item image-popup">
          <figure>
            <div class="overlay"><i class="ti-plus"></i></div>
            <img loading="lazy" src="<?php echo $image; ?>" alt="Image" class="img-responsive">
          </figure>
        </a>
      </div>
      <?php
      endforeach;
      ?>
    </div>
  </div>
</div>
<?php get_footer(); ?>