.gallery-grid {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .grid {
        display: grid;
        gap: 20px;
        width: 100%;
        grid-template-columns: repeat(3, 1fr); /* Default: Three equal columns */
    }

    .grid-column {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .grid-item {
        width: 100%;
        height: auto;
        overflow: hidden;
        position: relative; /* Ensures the image stays within the container */
    }

    .grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
        transition: transform 0.5s ease-out; /* Smooth transition */
    }
  
    /* Hover Effect: Zoom inside container */
    .grid-item:hover img {
        transform: scale(1.05); /* Slight zoom-in effect */
    }

    /* Locked Image Sizes */
    .locked {
        height: 300px; /* Fixed height to keep images uniform */
    }

    .locked img {
        height: 100%;
         max-height: 620px;
    }

    /* Single Image: Centered, 2 Columns Wide */
    .full {
        grid-column: span 2;
        display: flex;
        justify-content: center;
    }

    /
    .half, .third, .quarter, .one-third {
        grid-column: span 1;
    }

    .two-thirds {
        grid-column: span 2;
    }

    .square {
        grid-column: span 2;
        grid-row: span 2;
        height: 100%;
    }

    .stacked {
        grid-column: span 1;
    }

    /* Tall Images */
    .tall {
        grid-row: span 2;
        height: 620px; /* Matches the combined height of two smaller images */
    }

    /* Center column taller images */
    .center-column .tall {
        flex: 1.5; /* Each tall image spans 1.5 times a short image */
    }

    /* Ensure left and right column images are equal height */
    .left-column .grid-item,
    .right-column .grid-item {
        flex: 1; /* Short images take equal space */
    }

    /* Adjust Grid for 4 Images */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr); /* Two equal columns for 2x2 layout */
    }

    /* Adjust Grid for 5&6 Images */
    .grid-5, .grid-6 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
    }
  
    /* Adjust Grid for 8 Images */
    .grid-8 {
        grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
        grid-template-rows: auto auto auto; /* 3 rows */
    }

    /* Ensure locked image sizes */
    .grid-8 .grid-item {
        height: 250px; /* Set a balanced height */
    }

    .grid-8 .grid-item img {
        height: 100%;
        object-fit: cover;
    }


    /* --- GENERAL RESPONSIVE FIXES --- */
    @media (max-width: 768px) {
        .grid {
            grid-template-columns: repeat(2, 1fr); /* Two equal columns */
        }

        .grid-column {
            display: contents; /* Flatten structure to allow direct grid control */
        }

        .grid-item {
            flex: none !important;
            height: auto;
        }

        .grid-item img {
            object-fit: cover;
        }
      
        .grid-5 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto auto;
        }
      
        .grid-6 {
              grid-template-columns: repeat(2, 1fr);
              grid-template-rows: auto auto auto;
          }

          .grid-6 .full {
              grid-column: span 2;
          }

          .grid-6 .one-third {
              grid-column: span 1;
          }

          .grid-6 .two-thirds {
              grid-column: span 2;
          }
      
          .grid-8 {
              grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
              grid-template-rows: repeat(4, auto); /* 4 rows */
          }

          .grid-8 .grid-item {
              height: 220px; /* Reduce height for better balance */
          }
      
          .grid-8 .right-column .grid-item:first-child {
              margin-top: -20px;
          }

        

        .two-thirds {
            grid-column: span 1;
        }

        .square {
            grid-column: span 2;
            grid-row: span 2;
            height: 100%;
        }

        .stacked {
            grid-column: span 1;
        }
    }

    @media (max-width: 480px) {
        .grid {
            grid-template-columns: 1fr; /* Single column */
        }
      
        .grid-6 {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }

        .grid-6 .grid-item {
            grid-column: span 1;
            height: auto;
        }

        .grid-item {
            flex: none !important;
            height: auto;
        }
      
        .grid-5, .grid-6, .grid-8 {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }
      
          .grid-8 .grid-item {
              height: auto; /* Allow flexibility */
          }
      
          .grid-8 .right-column .grid-item:first-child {
              margin-top: auto;
          }


        .stacked {
            grid-column: span 1;
        }
    }