/*
@Author: ThemeMascot
@URL: http://ThemeMascot.com

This is the file where you can add your custom styles to change the look of the
theme. But don't modify style-main.css file.

*/

/* Your custom css codes start here: */

/*gallery*/


/* ===== Gallery Container ===== */
.gallery-isotope {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* ===== Gallery Item ===== */
.gallery-item {
    flex: 1 1 calc(20% - 15px); /* 5 per row desktop */
}

/* ===== Image Styling ===== */
.gallery-img {
    width: 100%;
    height: 220px;              /* Fixed height */
    object-fit: cover;          /* Crop without stretching */
    border-radius: 8px;
    transition: 0.3s ease;
}

/* Hover Effect */
.gallery-img:hover {
    transform: scale(1.05);
}

/* ===== Tablet ===== */
@media (max-width: 992px) {
    .gallery-item {
        flex: 1 1 calc(33.33% - 15px); /* 3 per row */
    }
}

/* ===== Mobile ===== */
@media (max-width: 576px) {
    .gallery-item {
        flex: 1 1 100%; /* 1 per row */
    }

    .gallery-img {
        height: 200px;
    }
}