/* CSS Document */
.contentPicturesGallery  {
    --ideal-row-height: 200px;                  /* higher values make it harder to align bricks */
     --width-tolerance: 180px;                  /* best about 90% of --ideal-row-height */
    --background: var(--logo-color-1-light);    /* background color */
    --grid-color: white;                        /* grid color */
    --gap-width: 5px;                           /* gap width */
    /* --widest-width: 1000px; */               /* set optional variable --widest-width to the widest width, any of your images has. */
    --width: 0;                                 /* sensible defaults for the items of the gallery **/
    --height: 0;
}
.contentPicturesGallery  {
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap-width);
    margin-left: auto;
    margin-right: auto;
    min-width: var(--widest-width, auto);
    background: var(--background, initial);
    overflow: hidden;
    box-shadow: 0 0 0 var(--gap-width) var(--grid-color);
}

.contentPicturesGallery > * {
    flex: 1;
    width: auto;
    box-shadow: 0 0 0 var(--gap-width) var(--grid-color)
}
.contentPicturesGallery > * {
    object-fit:cover;
    --aspect: calc(var(--width) / var(--height));    /** The image aspect ratio **/
    --min-width: calc(var(--aspect) * (var(--ideal-row-height) - var(--width-tolerance)));    /* The image width proportional to the --ideal-row-height minus --width-tolerance */
    --max-width: calc(var(--aspect) * (var(--ideal-row-height) + var(--width-tolerance)));    /* The image width proportional to the --ideal-row-height plus --width-tolerance */
    --basis: calc(var(--aspect) * (var(--ideal-row-height)));    /* Basic width, before the flex container lays out the items */
    max-width: var(--max-width);
    min-width: var(--min-width);
    flex-basis: var(--basis);
}

.contentPicturesGallery .item .cursorPointer {
    height: 100%;
}

.contentPicturesGallery .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contentPicturesGallery .item .overlay {
    position: absolute;
}

@media all and (max-width: 1200px) { .contentPicturesGallery { --ideal-row-height: 150px; --width-tolerance: 120px; } }
@media all and (max-width: 800px) { .contentPicturesGallery { --ideal-row-height: 100px; --width-tolerance: 80px; } }
@media all and (max-width: 500px) { .contentPicturesGallery { --ideal-row-height: 80px; --width-tolerance: 60px; } }