<div class="container">
    <div class="gallery-header">
        <div class="gallery-title">{{ $gallery->title }}</div>
        <div class="gallery-subtitle">{{ $gallery->text }}</div>
    </div>

    <div class="image-grid">
        <!-- Repeat grid-item for as many images as needed -->
        @foreach (collect($gallery->images)->take($gallery->display_count) as $image)
            <div class="grid-item">
                <img src="{{ asset('storage/' . $image['image']) }}" alt="Gallery Image">
            </div>
        @endforeach
    </div>
</div>
<style>
    .container {

          margin-top: 200px;
           position: relative;
       }
       /* Header Section */
       .gallery-header {
           padding: 80px 70px 40px 70px;
           background-color: #fff;
           box-sizing: border-box;
       }

       .gallery-title {
           font-size: 54px;
           color: #007bff; /* Blue color for the title */
           margin-bottom: 10px;
           font-weight: 700;
           text-transform: uppercase;
       }

       .gallery-subtitle {
           font-size: 22px;
           color: #555;
           margin-top: 0;
       }

       /* Image Grid Section */
       .image-grid {
           padding: 0 70px 70px 70px;
           display: grid;
           grid-template-columns: repeat(3, 1fr); /* Always 3 columns */
           gap: 20px;
           box-sizing: border-box;
           justify-items: center; /* Center images in their grid cells */
       }

       .grid-item {
           overflow: hidden;
           aspect-ratio: 16 / 9;
           display: flex;
           justify-content: center;
           align-items: center;
           border-radius: 20px;
       }

       .grid-item img {
        border-radius: 20px;
           width: 400px;
           height: 300px;
           object-fit: cover;
           display: block;
       }

     /* Enhanced responsive styles */
    @media (max-width: 1200px) {
        .container {
            margin-top: 180px;
        }
        .gallery-header {
            padding: 70px 60px 35px 60px;
        }
        .gallery-title {
            font-size: 48px;
        }
        .gallery-subtitle {
            font-size: 20px;
        }
        .image-grid {
            padding: 0 60px 60px 60px;
            gap: 18px;
        }
        .grid-item img {
            width: 350px;
            height: 260px;
        }
    }

    @media (max-width: 992px) {
        .container {
            margin-top: 150px;
        }
        .gallery-header {
            padding: 60px 50px 30px 50px;
        }
        .gallery-title {
            font-size: 42px;
        }
        .gallery-subtitle {
            font-size: 18px;
        }
        .image-grid {
            padding: 0 50px 50px 50px;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        .grid-item img {
            width: 320px;
            height: 240px;
        }
    }

    @media (max-width: 768px) {
        .container {
            margin-top: 120px;
        }
        .gallery-header {
            padding: 50px 40px 25px 40px;
        }
        .gallery-title {
            font-size: 36px;
        }
        .gallery-subtitle {
            font-size: 16px;
        }
        .image-grid {
            padding: 0 40px 40px 40px;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }
        .grid-item img {
            width: 280px;
            height: 210px;
        }
        .grid-item {
            border-radius: 16px;
        }
        .grid-item img {
            border-radius: 16px;
        }
    }

    @media (max-width: 600px) {
        .container {
            margin-top: 100px;
        }
        .gallery-header {
            padding: 40px 30px 20px 30px;
        }
        .gallery-title {
            font-size: 30px;
        }
        .gallery-subtitle {
            font-size: 15px;
        }
        .image-grid {
            padding: 0 30px 30px 30px;
            grid-template-columns: 1fr;
            gap: 12px;
        }
        .grid-item img {
            width: 100%;
            max-width: 320px;
            height: 240px;
        }
        .grid-item {
            border-radius: 14px;
        }
        .grid-item img {
            border-radius: 14px;
        }
    }

    @media (max-width: 480px) {
        .container {
            margin-top: 80px;
        }
        .gallery-header {
            padding: 30px 20px 15px 20px;
        }
        .gallery-title {
            font-size: 26px;
        }
        .gallery-subtitle {
            font-size: 14px;
        }
        .image-grid {
            padding: 0 20px 20px 20px;
            gap: 10px;
        }
        .grid-item img {
            max-width: 280px;
            height: 210px;
        }
        .grid-item {
            border-radius: 12px;
        }
        .grid-item img {
            border-radius: 12px;
        }
    }

    @media (max-width: 360px) {
        .container {
            margin-top: 60px;
        }
        .gallery-header {
            padding: 25px 15px 12px 15px;
        }
        .gallery-title {
            font-size: 22px;
        }
        .gallery-subtitle {
            font-size: 13px;
        }
        .image-grid {
            padding: 0 15px 15px 15px;
            gap: 8px;
        }
        .grid-item img {
            max-width: 240px;
            height: 180px;
        }
        .grid-item {
            border-radius: 10px;
        }
        .grid-item img {
            border-radius: 10px;
        }
    }

    /* Ensure proper image scaling on very small screens */
    @media (max-width: 480px) {
        .grid-item {
            aspect-ratio: 4/3;
        }
    }

    @media (max-width: 360px) {
        .grid-item {
            aspect-ratio: 4/3;
        }
    }
</style>