.gallery-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    position: relative;
}

/* Overlay container */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%; /* Adjust the height of the overlay as needed */
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 1.5rem!important;
    padding-bottom: 20px; /* Adjust padding as needed */
}

/* Text inside the overlay */
.gallery-overlay-text {
    color: white;
    font-size: 20px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
    transform: translateY(20px);
}

/* Show the overlay on hover */
.gallery-column:hover .gallery-overlay {
    opacity: 1;
}

/* Show the text on hover */
.gallery-column:hover .gallery-overlay-text {
    opacity: 1;
    transform: translateY(0);
}

/* Masonry grid settings */
.gallery-row {
    margin-left: -15px; /* gutter size offset */
    width: auto;
}

.gallery-column {
    padding-left: 15px; /* gutter size */
    background-clip: padding-box;
    position: relative;
}

.gallery-column > div {
    margin-bottom: 15px; /* gutter size */
}

/* Column width for desktop */
.gallery-column {
    width: 33.333%; /* Adjust based on your column count */
}

/* Responsive settings */
@media (max-width: 768px) {
    .gallery-column {
        width: 50%; /* Two images per row on tablets */
    }
}

@media (max-width: 576px) {
    .gallery-column {
        width: 100%; /* One image per row on mobile */
    }
}