.content-single-image img{
    width: 100%;
}

.gallery-masonry {
    display: flex;
    flex-wrap: wrap;
    margin: -10px; /* Adjust as necessary */
}

.gallery-masonry .gallery-item {
    width: calc(33.333% - 20px); /* Adjust percentage based on the number of columns */
    margin: 10px; /* Adjust as necessary */
    box-sizing: border-box;
}

.gallery-masonry img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* Optional styling */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery-masonry {
        width: calc(50% - 20px); /* Two columns on smaller screens */
    }
}

@media (max-width: 480px) {
    .gallery-masonry {
        width: calc(100% - 20px); /* Single column on very small screens */
    }
}

.content-slider {
    position: relative;
}

.content-slider .gallery-item {
    margin: 0; /* Adjust margins as needed */
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust the minmax value to control the size of the grid items */
    gap: 15px; /* Space between grid items */
}

.gallery-grid .gallery-item {
    overflow: hidden; /* Prevents overflow for images */
    border-radius: 8px; /* Optional: adds rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for a slight elevation effect */
}

.gallery-grid .gallery-item img {
    width: 100%; /* Makes the image take full width of the item */
    height: 100%; /* Ensures the image covers the height of the item */
    object-fit: cover; /* Ensures the image covers the area without distorting */
    display: block; /* Ensures no extra space below images */
}