.gallery-loadmore-section,
.gallery-loadmore-section>.gallery-item,
.gallery-loadmore-section>.gallery-item.loadmore {
    position: relative;
}
.gallery-loadmore-section {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 10px);
    margin: 0 -5px;
}
.gallery-loadmore-section>.gallery-item {
    width: calc((100% / 6) - 10px);
    min-width: calc((100% / 6) - 10px);
    /* flex: 1 0 0; */
    height: auto;
    margin: 5px;
    border-radius: var(--cpn-card-border-radius);
    overflow: hidden;
    background-color: rgba(var(--cpn-bg-color-img),1);
}
.gallery-loadmore-section>.gallery-item::before,
.gallery-loadmore-section>.gallery-item::after {    
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    pointer-events: none;
}
.gallery-loadmore-section>.gallery-item::before {  
    position: absolute; 
    opacity: 0;
    background-color: rgba(var(--cpn-color-black-dark),0.3);
    transition: opacity var(--cpn-transition-duration-fast) ease;
    z-index: 2;
}
.gallery-loadmore-section>.gallery-item:hover::before {
    opacity: 1;
}
.gallery-loadmore-section>.gallery-item::after {   
    position: relative; 
    padding-top: 100%;
    z-index: 0;
}
.gallery-loadmore-section>.gallery-item>.img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 1;
}
.gallery-loadmore-section>.gallery-item.loadmore.area-for-button-on-banner .button-on-banner {
    visibility: hidden;
}
.gallery-loadmore-section>.gallery-item.loadmore>.loadmore-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 110%;
    line-height: 30px;
    padding: 20px;
    color: rgba(var(--cpn-color-white), 1);
    text-shadow: 2px 2px 4px rgba(var(--cpn-color-black-dark), 0.5);
    background-color: rgba(var(--cpn-color-black-dark), 0.5);
    -webkit-backdrop-filter: saturate(100%) blur(10px);
    -moz-backdrop-filter: saturate(100%) blur(10px);
    -ms-backdrop-filter: saturate(100%) blur(10px);
    -o-backdrop-filter: saturate(100%) blur(10px);
    backdrop-filter: saturate(100%) blur(10px);
    cursor: pointer;
    z-index: 2;
}
.gallery-loadmore-section>.button-row {
    width: 100% !important;
    margin-top: 10px;
    display: none;
}

/* xxl */
@media (min-width: 1400px) {}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* .gallery-loadmore-section>.gallery-item {
        width: calc((100% / 4) - 10px);
        min-width: calc((100% / 4) - 10px);
    } */

}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {

    .gallery-loadmore-section>.gallery-item {
        width: calc((100% / 4) - 10px);
        min-width: calc((100% / 4) - 10px);
    }

}

/* sm - xs */
@media (max-width: 767.98px) {}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {

    .gallery-loadmore-section>.gallery-item {
        width: calc((100% / 3) - 10px);
        min-width: calc((100% / 3) - 10px);
    }
    .gallery-loadmore-section>.gallery-item.loadmore>.loadmore-btn {
        display: none;
        pointer-events: none;
    } 
    .gallery-loadmore-section>.gallery-item.loadmore.area-for-button-on-banner .button-on-banner {
        visibility: inherit;
    }
    .gallery-loadmore-section>.button-row {
        display: flex;
    }

}

/* xs */
@media (max-width: 575.98px) {

    .gallery-loadmore-section>.gallery-item {
        width: calc((100% / 3) - 5px);
        min-width: calc((100% / 3) - 5px);
        margin: 2.5px;
    } 
    .gallery-loadmore-section>.gallery-item.loadmore>.loadmore-btn {
        display: none;
        pointer-events: none;
    }   
    .gallery-loadmore-section>.gallery-item.loadmore.area-for-button-on-banner .button-on-banner {
        visibility: inherit;
    }
    .gallery-loadmore-section>.button-row {
        display: flex;
    }

}

/* xs custom */
@media (max-width: 399.98px) {}