@charset "utf-8";
/* CSS Document */

.block.gallery > div > h2 {

    font-size: var(--h-medium); 
    line-height: var(--h-medium-lh);    
    margin: 0 0 var(--h-small-lh) 0; 
    
}

.block.gallery > div > .gallery-thumb {
 
    width:50%;
    aspect-ratio: 3 / 2;
    display: inline-block;
    border-right: var(--general-padding) solid transparent;
    border-bottom: var(--general-padding) solid transparent;
    overflow: hidden;
    vertical-align: top;
    cursor:pointer;

}

.block.gallery.column-3 > div .gallery-thumb,
.block.gallery.column-5 > div .gallery-thumb {
 
    border-right: var(--general-padding-tiny) solid transparent;
    border-bottom: var(--general-padding-tiny) solid transparent;

}

.block.gallery > div.single .gallery-thumb {
 
    width:100%;
    border-right: 0;
    border-bottom: 0;

}

.block.gallery > div .gallery-thumb > img {
 
    width:100%;
    height:100%;
    object-fit: cover; 

}

.block.gallery > div .modal {
 
    position: fixed;
    width:100%;
    height:100%;
    z-index: 3000;
    background-color: #ffffff;
    top:0;
    left:0;
    display:none;

}

.block.gallery > div .modal > .content {
 
    position: relative;
    padding: var(--general-padding);

}

.block.gallery > div .modal > .content > .modal-close {
 
    position: absolute;
    right:var(--general-padding);
    top:var(--general-padding);
    z-index: 4000;
    cursor: pointer;

}

.block.gallery > div .modal > .content > .modal-close > svg {
 
    width:32px;
    height:auto;

}

.block.gallery > div .modal > .content > .slideshow > .slide {
 
    width:auto;
    height:calc(100vh - 40px);
    overflow: hidden;

}

.block.gallery > div .modal > .content > .slideshow > .slide > img {
 
    width:100%;
    height:100%;
    object-fit: cover; 

}

.block.gallery > div .modal > .content > .prev-arrow,
.block.gallery > div .modal > .content > .next-arrow {
    
    position: absolute;
    z-index: 4000;
    top:50%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);  
    transform: translate(0, -50%);
    cursor: pointer;
    width:32px;
    height:32px;

}

.block.gallery > div .modal > .content > .prev-arrow {

    left:20px;
    
}

.block.gallery > div .modal > .content > .next-arrow {

    right:20px;
    
}


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


}

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



}

@media screen and (max-width: 480px) {
    
    .block.gallery > div > .gallery-thumb {

        width:100%;
        border-right: 0;

    }

}