#collageImg {
    padding: 0;
}

.heroImgCollageContainer {
    padding: 71px 32px 101px 32px;
    width: 100%;
    max-width: 64.5rem;
}

/* div container the gallery */
.hero-img-collage {
    width: 100%;
    padding: 2rem;
    border: 0.5rem solid rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

.glassEffect {
    position: relative;
    z-index: 22;
    background-color: rgba(0,0,0,0.3);
    pointer-events: none; /* The pointer-events property defines whether or not an element reacts to pointer events. | Do not allow copying or downloading an image. */
}

/* TODO  an unordered list with a list of images*/
.column-with-images,
.row-with-images {/* flex box */
    list-style: none;
}

.column-with-images {
    row-gap: 0.6rem;
}

.row-with-images{
    column-gap: 0.6rem;
}

.list-img { /* flex item*/
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;  /* IE 10 */ 
}

/* An image out of the box. */
.withEffect {
    position: relative;
    z-index: 10;
     /*transform list */
    transform: translate(2rem,1rem) rotate(-15deg);
    right: 8px;
    box-shadow: 0 10px 10px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 10px 10px rgba(0,0,0,.5);
}

/* images */
.frameOffWhite {
    padding: 0.185rem;
    background-color: #f1f1e6; /* rgb(241,241,230) *//* colorOffWhite */
}

/* BREAKPOINTS WITH *//* CSS3 MEDIA QUERIES 
********************************************/
@media only screen and (min-width: 1200px) {
    .heroImgCollageContainer {
        padding: 85px 0 110px 0;
    }
}

@media only screen and (max-width: 720px) {
    .hero-img-collage {
        padding: 1rem;
    } 

    .frameOffWhite {
        padding: .1875rem;
    }
}

@media only screen and (max-width: 560px) {
    /* TODO  an unordered list with columns with images.
    /* deactivate Images the last 2 for each row */
    .column-with-images {
        row-gap: 0.3rem;
    }
    
    .row-with-images{
        column-gap: 0.3rem;
    }

    .frameOffWhite {
        padding: .09rem;
    }
}

@media only screen and (max-width: 420px) {
    /* div container the gallery */
    .hero-img-collage {
        border: 0.3rem solid rgba(0, 0, 0, 0.5); 
    }

    .hero-title {
        font-size: 3rem;
    }
}