/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
.media-category-gallery {
    display: grid;
    gap: 16px;
}

.media-category-gallery.columns-1 { grid-template-columns: 1fr; }
.media-category-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.media-category-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.media-category-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.media-category-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.media-category-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }

.media-category-gallery__item {
    margin: 0;
}

.media-category-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
}

.acf-media-gallery {
    column-gap: 16px;
}

.acf-media-gallery.columns-1 { column-count: 1; }
.acf-media-gallery.columns-2 { column-count: 2; }
.acf-media-gallery.columns-3 { column-count: 3; }
.acf-media-gallery.columns-4 { column-count: 4; }
.acf-media-gallery.columns-5 { column-count: 5; }
.acf-media-gallery.columns-6 { column-count: 6; }

.acf-media-gallery__item {
    margin: 0 0 16px !important;
    break-inside: avoid;
}

.acf-media-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Responsive tweaks similar to Elementor masonry */
@media (max-width: 767px) {
    .acf-media-gallery {
        column-count: 1 !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .acf-media-gallery.columns-4,
    .acf-media-gallery.columns-5,
    .acf-media-gallery.columns-6 {
        column-count: 3;
    }
}