/*
fait le css pour ces balises :
<section id="<?php echo $id; ?>" class="pictures-grid<?php echo $className; ?>">
        <div class="container">
            <?php if ($grid_title) : ?>
                <div class="section-title">
                    <h2><?php echo esc_html($grid_title); ?></h2>
                </div>
            <?php endif; ?>
            <div class="pictures-grid-wrapper pictures-per-row-<?php echo esc_attr($number_of_images_per_row); ?>">
                <?php foreach ($images as $image) : ?>
                    <div class="picture-item">
                        <?php
                        $existing_alt = get_post_meta($image, '_wp_attachment_image_alt', true);
                        $alt_text = !empty($existing_alt) ? $existing_alt : get_the_title($image);

                        echo wp_get_attachment_image(
                            $image,
                            'full',
                            false,
                            array(
                                'class' => 'width100 displayblock',
                                'alt' => esc_attr($alt_text)
                            )
                        ); ?>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
*/

section.samu-pictures-grid {
    padding: 60px 0;
}

section.samu-pictures-grid .section-title {
    text-align: center;
    margin-bottom: 40px;
}

section.samu-pictures-grid .pictures-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

section.samu-pictures-grid .pictures-grid-wrapper .picture-item {
    box-sizing: border-box;
}

/* Define widths based on number of images per row */
section.samu-pictures-grid .pictures-grid-wrapper.pictures-per-row-1 .picture-item {
    flex: 1 1 100%;
}

section.samu-pictures-grid .pictures-grid-wrapper.pictures-per-row-2 .picture-item {
    flex: 1 1 calc(50% - 10px);
}

section.samu-pictures-grid .pictures-grid-wrapper.pictures-per-row-3 .picture-item {
    flex: 1 1 calc(33.333% - 13.33px);
}

section.samu-pictures-grid .pictures-grid-wrapper.pictures-per-row-4 .picture-item {
    flex: 1 1 calc(25% - 15px);
}

section.samu-pictures-grid .pictures-grid-wrapper .picture-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    section.samu-pictures-grid .pictures-grid-wrapper .picture-item {
        flex: 1 1 calc(50% - 10px);
    }
}