@for $i from 1 through 10 {
    .gallery-columns-#{$i} .gallery-item:nth-child(#{ $i + 1}){
        clear:both;
    }
}
/* shortcode gallery */
div.gallery{
    @extend %block;
    clear: both;
    display:block;
    margin-left:auto;
    margin-right:auto;
    .gallery-icon{
        display:flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        height:100%;
    }
    &.gallery-size-thumbnail{
        .gallery-item{
            background:transparent!important;
        }
    }    
    .gallery-item {
        position:relative;
        margin-bottom:-4px;
        display:inline-block;
        text-align: center;
        vertical-align:top;
    }
    .gallery-caption {
        @include font_size(5);
        margin-top:0;
        margin-bottom:0;
    }
    br {
        clear: both;
    }
    img{
        max-width:100%;
    }
    .gallery figcaption{
    }
    /**
     * small gallery item figcaption
     * gallery-item hover show
     */
    &.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);
        margin-bottom:var(--thm_box_gap);
    }
    &.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:#fff;
        z-index:200;
        width:290px;
        max-width:290px;
    }
}
.sidebar-widget-area,
.footer-widget-area{
    div.gallery{
        margin-left:auto;
        margin-right:auto;
        &.gallery-size-thumbnail{
            figcaption{
                clip:rect(1px,1px,1px,1px);
                clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);
                position:absolute;
            }
        }
    }
}
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,
ul.wp-block-gallery.columns-1 .blocks-gallery-item{
    width:100%;
}
/**
 * Gutenberg gallery
 */
@for $i from 2 through 10 {
    ul.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 );
    }
    .gallery-columns-#{$i} .gallery-item{
        width: calc( 100% / #{$i} - var( --thm_box_gap, 3px ) * 2);
        padding:0;
        margin: var( --thm_box_gap, 3px );
    }
}
@each $size in $image_sizes {
    $key : nth( $size, 1);
    $val : nth( $size, 2);
    @for $i from 2 through 10 {
        .gallery-columns-#{$i}.gallery-size-#{$key}{
            width: calc( #{$val}px * #{$i} + var( --thm_box_gap, 3px ) * #{$i * 2} ); //+ var(--thm_content_gap, 24px) * 2
            max-width:calc(100% - var(--thm_content_gap) * 2);
        }
    }
}
/* Gutenberg Gallery */
ul.wp-block-gallery{
    left:0;
}
.wp-block-gallery li.blocks-gallery-item{
    margin:var( --thm_box_gap, 3px );
    -ms-flex-positive: 0;
    flex-grow:1;
}
.entry-content .wp-block-gallery.aligncenter,
.entry-content .wp-block-gallery.alignleft,
.entry-content .wp-block-gallery.alignright,
.entry-content .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: brightness(50%);
        }
        figcaption{
            filter: none;
            visibility:visible;
            position: absolute;
            width: 100%;
            display: block;
            height:auto;
            max-height: 100%;
            overflow: auto;
            padding: 1rem;
            color: #fff;
            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%);
        }
    }

}