/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 16 Apr 2026, 8:14 am
*/

/* Mobile Only: 2 columns and auto height */
@media only screen and (max-width: 767px) {
    /* Adjust the gallery container */
    .foogallery.fg-default, 
    .foogallery.fg-responsive, 
    .foogallery.fg-masonry {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    /* Force 2 columns */
    .foogallery .fg-item {
        width: calc(50% - 10px) !important; /* Adjust 10px to change the gap size */
        margin: 5px !important;
        min-width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        height: auto !important; /* Allows height to fit the image */
    }

    /* Ensure the internal image doesn't have forced dimensions */
    .foogallery .fg-item .fg-image {
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        object-fit: contain !important;
    }
}
@media only screen and (max-width: 767px) {
/* 3. Force the image to cover the entire container width and height */
    /* This eliminates gaps by cropping the photo slightly to fit the container */
    .foogallery img.fg-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: cover !important; /* Most important to remove grey gaps */
        display: block !important;
    }