@for $i from 1 through 10 {
    .gallery-columns-#{$i} .gallery-item:nth-child(#{ $i + 1}){
        clear:both;
    }
}
/**
 * Shortcode gallery, widget gallery
 * ========================================================================== */
@each $size in $image_sizes {
    $key : nth( $size, 1);
    $val : nth( $size, 2);
    @for $i from 2 through 10 {
        div.gallery-columns-#{$i}.gallery-size-#{$key}{
            width: calc( #{$val}px * #{$i} + var( --thm_box_gap, 3px ) * #{$i * 2} + var(--thm_common_border_width) * #{$i * 2} );
            max-width:calc(100% - var(--thm_content_gap, 24px) * 2);
        }
    }
}
.footer-widget-area,
.sidebar-widget-area,
.shortcode-wrapper{
    div.gallery{
        @extend %block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        clear: both;
        float:none;
        padding-left:0;
        padding-right:0;
        &.gallery-size-thumbnail{
            .gallery-item{
                justify-content: start;
                align-items: stretch;
            }
        }
        figure{
            width:-moz-fit-content;
            width:fit-content;
        }
        .gallery-item {
            flex: 0 1 auto;
            position: relative;
            display: flex;
            text-align: center;
            vertical-align: middle;
            flex-direction: column;
            //  justify-content: center;
            align-items: center;
            .gallery-icon{
                a{
                    margin-top:0;
                    margin-bottom:0;
                }
                img{
                    object-fit:contain;
                }
            }
        }
        .gallery-caption {
            @include font_size(5);
            margin-top:0;
            margin-bottom:0;
        }
        br {
            clear: both;
        }
        img{
            max-width:100%;
        }
        /**
         * small gallery item figcaption
         * gallery-item hover show
         */
        &.gallery-columns-0 .gallery-item{
            width:auto;
            width: -moz-fit-content;
            width:fit-content;
        }
        &.gallery-columns-9 .gallery-item,
        &.gallery-columns-8 .gallery-item,
        &.gallery-columns-7 .gallery-item,
        &.gallery-columns-6 .gallery-item,
        &.gallery-columns-5 .gallery-item {
            margin-top:var(--thm_box_gap, 3px);
            margin-bottom:var(--thm_box_gap, 3px);
        }
        &.gallery-columns-9 .gallery-item figcaption,
        &.gallery-columns-8 .gallery-item figcaption,
        &.gallery-columns-7 .gallery-item figcaption,
        &.gallery-columns-6 .gallery-item figcaption,
        &.gallery-columns-5 .gallery-item figcaption{
            visibility:hidden;
            position:absolute;
        }
        &.gallery-columns-9 .gallery-item:hover figcaption,
            &.gallery-columns-8 .gallery-item:hover figcaption,
            &.gallery-columns-7 .gallery-item:hover figcaption,
            &.gallery-columns-6 .gallery-item:hover figcaption,
            &.gallery-columns-5 .gallery-item:hover figcaption{
            visibility:visible;
            background:var(--thm_white_color);
            z-index:200;
            width:290px;
            max-width:290px;
        }
    }
}
body{
    .sidebar-widget-area,
    .footer-widget-area{
        div.gallery[id]{
            margin-left:auto;
            margin-right:auto;
            padding-left:0;
            padding-right:0;
            &.gallery-size-thumbnail{
                figcaption{
                    clip:rect(1px,1px,1px,1px);
                    clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);
                    position:absolute;
                }
            }
            figure.gallery-item{
            }
        }
    }
}
div.gallery-columns-1.gallery-size-thumbnail{
    width:calc(150px + var(--thm_content_gap, 24px) * 2 );
    box-sizing:border-box;
}
.gallery-columns-1 .gallery-item{
    width:100%;
}
/**
 * Block gallery WordPress 5.0 - 5.2
 */
@for $i from 2 through 10 {
    .gallery-columns-#{$i} .gallery-item{
        width: calc( 100% / #{$i} - var( --thm_box_gap, 3px ) * 2);
        padding:0;
        margin: var( --thm_box_gap, 3px );
    }
}
/* Gutenberg Gallery */

.wp-block-gallery li.blocks-gallery-item{
    margin:var( --thm_box_gap, 3px );
    -ms-flex-positive: 0;
    flex-grow:1;
}
.layout .wp-block-gallery.aligncenter,
.layout .wp-block-gallery.alignleft,
.layout .wp-block-gallery.alignright,
.layout .wp-block-gallery{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style-type: none;
    margin-top:1.5rem;
    margin-bottom:.75rem;
    .blocks-gallery-item {
        margin:var( --thm_box_gap, 3px );
        -ms-flex-positive: 0;
        flex-grow:1;
    }
    .blocks-gallery-item figure{
        flex-direction:row;
        overflow:hidden;
        max-width:100%;
        align-items: center;
        justify-content: center;
        margin:0;
    }
    .is-cropped{
        .blocks-gallery-image img, //old gallery
        .blocks-gallery-image a,   //old gallery
        .blocks-gallery-item a,
        .blocks-gallery-item img {
            -ms-flex: 1;
            flex: 1;
            width: 100%;
            height:100%;
            -o-object-fit: cover;
            object-fit: cover;
        }
        figure{
            height:100%;
        }
    }
    .blocks-gallery-image img,
    .blocks-gallery-item img{
        margin:0;
        display:block;
        max-width:100%;
    }
    .blocks-gallery-item figcaption{
        visibility:hidden;
    }
    .blocks-gallery-item figure{
        img{
            filter: brightness(100%);
            transition: all 0.5s ease;
        }
    }
    .blocks-gallery-item figure:focus figcaption{
        visibility:visible;
        opacity:.7;
        transition:visibility 1s, opacity 1s;
        -webkit-transition:visibility .7s,opacity .7s;
        overflow:hidden;
        margin:4px;
        outline:0;
    }
    .blocks-gallery-item figure:hover{
        img{
            filter: var(--thm_gallery_hover_filter);
        }
        figcaption{
            filter: none;
            visibility:visible;
            position: absolute;
            width: 100%;
            display: block;
            height:auto;
            max-height: 100%;
            overflow: auto;
            padding: 1rem;
            color: var(--thm_white_color);
            text-align: center;
            font-size: var( --thm_meta_data_font_size );
            font-family:var(--thm_meta_data_font_family);
            bottom:auto;
            background:transparent;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }
}
/**
 * Block gallery WordPress 5.3 -
 */
@for $i from 2 through 10 {
    figure.wp-block-gallery.columns-#{$i} .blocks-gallery-item{
        width: calc( 99.9% / #{$i} - var( --thm_box_gap, 3px ) * 2);// 99.9% for edge lauout broken when figcaption scroll
        padding:0;
        margin: var( --thm_box_gap, 3px );
    }
}
ul.blocks-gallery-grid{
    left:0;
    width:100%;
}

figure.wp-block-gallery li.blocks-gallery-item{
    margin:var( --thm_box_gap, 3px );
    -ms-flex-positive: 0;
    flex-grow:1;
}
figure.wp-block-gallery.alignfull{
    width:100%;
}
.layout figure.wp-block-gallery.aligncenter,
.layout figure.wp-block-gallery.alignleft,
.layout figure.wp-block-gallery.alignright,
.layout figure.wp-block-gallery{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style-type: none;
    margin-top:1.5rem;
    margin-bottom:.75rem;
    .blocks-gallery-item {
        margin:var( --thm_box_gap, 3px );
        -ms-flex-positive: 0;
        flex-grow:1;
    }
    .blocks-gallery-item figure{
        flex-direction:row;
        overflow:hidden;
        max-width:100%;
        align-items: center;
        justify-content: center;
        margin:0;
    }
    .is-cropped{
        .blocks-gallery-image img, //old gallery
        .blocks-gallery-image a,   //old gallery
        .blocks-gallery-item a,
        .blocks-gallery-item img {
            -ms-flex: 1;
            flex: 1;
            width: 100%;
            height:100%;
            -o-object-fit: cover;
            object-fit: cover;
        }
        figure{
            height:100%;
        }
    }
    .blocks-gallery-image img,
    .blocks-gallery-item img{
        margin:0;
        display:block;
        max-width:100%;
    }
    .blocks-gallery-item figcaption{
        visibility:hidden;
    }
    .blocks-gallery-item:focus .blocks-gallery-item__caption{
        visibility:visible
    }
    .blocks-gallery-item figure{
        img{
            filter: brightness(100%);
            transition: all 0.5s ease;
        }
    }
    .blocks-gallery-item figure:focus figcaption{
        visibility:visible;
        opacity:.7;
        transition:visibility 1s, opacity 1s;
        -webkit-transition:visibility .7s,opacity .7s;
        overflow:hidden;
        margin:4px;
        outline:0;
    }
    .blocks-gallery-item figure:hover{
        .has-image{
            img{
                filter: var(--thm_image_hover_filter);
            }
        }
        figcaption{
            filter: none;
            visibility:visible;
            position: absolute;
            width: 100%;
            display: block;
            height:auto;
            max-height: 100%;
            overflow: auto;
            padding: 1rem;
            color: var(--thm_white_color);
            text-align: center;
            font-size: var( --thm_meta_data_font_size );
            font-family:var(--thm_meta_data_font_family);
            bottom:auto;
            background:transparent;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }
}