/* FLEX */
.c10-rev1 :is(.flexGallery, .flexGallery[data-columns]) {
    /* User input values */
    --layout-gap: 1.25rem;
    --image-size: 250px;
    --flex-column-gap: 2%;
    --flex-image-width: 32%;

    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

    row-gap: var(--layout-gap);
    column-gap: var(--flex-column-gap);
}

.c10-rev1 .flexGallery[data-columns=four] {
    --flex-image-width: 23%;
}

.c10-rev1 .flexItem {
    width: var(--flex-image-width);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* END FLEX */

/* FIGURE CAPTION */
.c10-rev1 .flexItem figcaption {
    font-family: 'Open Sans';
    font-weight: 300;
    font-size: 1.1rem;
    color: #111;
    line-height: 1.7;
}

/* END FIGURE CAPTION */

/* IMAGE WITH BACKGROUND STYLING */
.c10-rev1 .imageContainer {
    overflow: hidden;
    border-radius: 5px;
    width: 100%;
    height: var(--image-size);

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    transition: background 0.12s ease-in-out;
}

.c10-rev1 .imageContainer[data-orientation="landscape"] img {
    width: 100%;
}

.c10-rev1 .imageContainer:hover {
    cursor: pointer;
}

.c10-rev1 .imageContainer::after {
    content: '';
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    display: block;
}

.c10-rev1 .thumbnailImage {
    width: auto;
    height: var(--image-size);
    object-fit: cover;
    z-index: 3;
    display: block;

    transition: 0.12s ease-in-out;
}

/* END IMAGE WITH BACKGROUND STYLING */

/* ZOOM ANIMATIONS */
@keyframes test3 {
    0% {
        background-size: 100%;
    }

    100% {
        background-size: 102%;
    }
}

@keyframes test4 {
    0% {
        background-size: 102%;
    }

    100% {
        background-size: 100%;
    }
}

/* END ZOOM ANIMATIONS */



/* --------------------------------- */
/*            BREAKPOINTS            */
/* --------------------------------- */

/* IMAGE HOVER EFFECT */
@media only screen and (min-width: 750px) {
    .c10-rev1 .imageContainer:hover {
        animation: test3 0.12s ease-in-out forwards;
    }

    .c10-rev1 .imageContainer:not(:hover) {
        animation: test4 0.12s ease-in-out forwards;
    }

    .c10-rev1 .imageContainer:hover .thumbnailImage {
        scale: 102%;
        cursor: pointer;
    }
}

/* END IMAGE HOVER EFFECT */



/* IMAGE FIGURE BREAKPOINTS */
/*
@media only screen and (min-width: 1400px) {
    .c10-rev1 .flexGallery {
        --flex-image-width: 24%;
        --flex-column-gap: 1.3%;
    }
}
*/

@media only screen and (min-width: 901px) and (max-width: 1100px) {
    .c10-rev1 :is(.flexGallery, .flexGallery[data-columns]) {
        --flex-image-width: 48.5%;
        --flex-column-gap: 3%;
    }
}

@media only screen and (max-width: 825px) {
    .c10-rev1 :is(.flexGallery, .flexGallery[data-columns]) {
        --flex-image-width: 48.5%;
        --flex-column-gap: 3%;
    }
}

@media only screen and (max-width: 600px) {
    .c10-rev1 .flexGallery {
        --image-size: 175px;
        --grid-column-min-width: 190px;
    }

    .c10-rev1 .flexItem {
        max-width: 50%;
    }
}

@media only screen and (max-width: 470px) {

    .c10-rev1 .flexGallery {
        --image-size: 285px;
        --grid-column-min-width: 205px;
    }

    .c10-rev1 .flexItem {
        max-width: 100%;
        width: 100%;
    }

    .c10-rev1 :is(.flexGallery, .flexGallery[data-columns]) {
        --flex-image-width: 100%;
    }
}

@media only screen and (max-width: 376px) {
    .c10-rev1 .flexGallery {
        --image-size: 215px;
    }
}

/* END IMAGE FIGURE BREAKPOINTS */