/* 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 */
    --font-color: var(--font-color-light, #ffffff);
    --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 {
    position: relative;
    overflow: hidden;
}

.contentPicturesGallery .item .cursorPointer {
    height: 100%;
    cursor: url('../../images/icons/magnify.16x16.png') 0 0, auto;
}

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

.contentPicturesGallery .item .overlay {
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 10px;
    max-width: 100%;
    border-radius: 10px 0 0 0;
    background-color: rgba(0,0,0,0.5);
    margin-bottom: -100%;
    transition: margin var(--transition-time);
}
.contentPicturesGallery .item .overlay h3 { color: var(--font-color); font-size: 16px; line-height: 120%; text-align: right; hyphens: auto; }
.contentPicturesGallery .item .overlay p { color: var(--font-color); font-size: 14px; line-height: 100%; text-align: right; hyphens: auto; }
.contentPicturesGallery .item .overlay img { display: none; }
.contentPicturesGallery .item:hover .overlay { margin-bottom: 0; transition: margin var(--transition-time); }



@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; } }