/* --- Property Gallery Plugin Styles --- */

/* Base container */
.property-gallery {
    margin: 20px 0;
}

/* --- Grid Layout --- */


.property-gallery-grid {
    display: grid;
    /* This will now work correctly */
	gap: 2em;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));

}

.property-gallery-grid .property-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}
.property-gallery-grid .property-gallery-item img:hover {
    transform: scale(1.02);
}



@media(max-width: 500px){
	.property-gallery-grid {
    gap: 1em;
    /* Creates a responsive grid that shows as many columns as fit */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

}
}


/* --- Slider Layout --- */
/* Add some basic styling to ensure the slider looks good */
.property-gallery-slider .slick-slide {
    padding: 0 10px;
    /* Adds spacing between slides */
}

.property-gallery-slider .property-gallery-item img {
    width: 100%;
    height: 300px;
	object-fit: cover;
/*     border-radius: 5px; */
}

/* Style for slick dots */
.property-gallery-slider .slick-dots li button:before {
    font-size: 12px;
    color: #333;
}