.gallery-wrapper {
    position: relative;
    overflow: hidden;
}
.gallery{
    background-color: #FFFFFF;
}
.gallery-item {
    width: 50%;
    margin-bottom: 20px;
    cursor: pointer;
}

.gallery-item:last-child,
.gallery-item:nth-last-child(2) {
    margin-bottom: 0;
}

/*.gutter-sizer { width: 2%; }*/
/*.gallery-item:nth-child(odd) {*/
/*    padding-right: 10px;*/
/*}*/
/*.gallery-item:nth-child(even) {*/
/*    padding-left: 10px;*/
/*}*/
.gallery-item .slide-label{
    padding: 24px 60px 24px 24px;
    width: 386px;
     margin-top: 0;
    /* display: flex; */
    flex-direction: column;
    position: absolute;
    bottom: 0;
    right: 0;
}


.category-slider .slide-label{
   height: auto;
    min-height: auto;
    hyphens: auto;
    -webkit-hyphens: auto;
}



.gallery-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-title-wrapper h2{
    max-width: 946px;
    font-family: var(--font-primary-medium);
    color: var(--color-red);
}
/* reveal grid after images loaded */
.grid.are-images-unloaded {
    opacity: 0;
}

.animated-gallery .gallery-item {
    width: 100%;
    display: flex;
}
.animated-gallery .gallery-item img {
    max-width: 984px;
    width: 100%;
}
.animated-gallery .gallery-item:nth-child(odd) {
    justify-content: right;
    margin-top: calc(-1 * var(--spacing-xxl));
}
.animated-gallery .gallery-item:nth-child(even) {
    margin-top: calc(-1 * var(--spacing-xxl));
}
.animated-gallery .gallery-item:first-child {
    justify-content: right;
    margin-top: 0;
}
.non-animated-gallery .gallery-item {
    max-width: calc(50% - 36px);
}
.non-animated-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* hide by default */
.grid.are-images-unloaded .image-grid__item {
    opacity: 0;
}
.gallery-caption{
    padding: 24px;
    width: 504px;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}
.gallery-caption::after {
    width: 46px;
    background-color: var(--color-red);
    height: 4px;
    display: block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
}

.gallery-item-top-margin-xxl{
    /*transform: translateY(var(--spacing-xxl));*/
    margin-top: var(--spacing-xxl);
}
.gallery-item-top-margin-xl{
    /*transform: translateY(var(--spacing-xl));*/
    margin-top: var(--spacing-xl);

}
.gallery-item-top-margin-l{
    /*transform: translateY(var(--spacing-l));*/
    margin-top: var(--spacing-l);

}
.gallery-item-top-margin-ml{
    /*transform: translateY(var(--spacing-ml));*/
    margin-top: var(--spacing-ml);

}
.gallery-item-top-margin-m{
    /*transform: translateY(var(--spacing-m));*/
    margin-top: var(--spacing-m);

}
.gallery-item-top-margin-s{
    /*transform: translateY(var(--spacing-s));*/
    margin-top: var(--spacing-s);

}
.gallery-item-top-margin-xs{
    /*transform: translateY(var(--spacing-xs));*/
    margin-top: var(--spacing-xs);

}

.gallery-item p{
    max-width: 615px;
}

.gallery-item.with-hover:after{
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" viewBox="0 0 110 110"><g fill="none" stroke="%23ffffff" stroke-width="2"><circle cx="55" cy="55" r="55" stroke="none"/><circle cx="55" cy="55" r="54" fill="none"/></g><g transform="translate(31 32)"><path d="M0,0H47.587" transform="translate(0 23.794)" fill="none" stroke="%23ffffff" stroke-width="8"/><path d="M0,0H47.587" transform="translate(23.793) rotate(90)" fill="none" stroke="%23ffffff" stroke-width="8"/></g></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 100ms ease-in;
}
.gallery-item.with-hover:hover:after {
    display: block;
    content: '';
    opacity: 1;
}



@media (min-width: 481px) and (max-width: 850px){

    .gallery-item {
        position: relative;
    }

    .gallery-item, .grid__col-sizer {
        width: calc(50% - 10px);
    }

    /*.grid__gutter-sizer {*/
    /*    width: calc(50% - 8px);*/
    /*}*/

    .gallery-item-top-margin{

        transform: unset;

    }
    .gallery-container-wrapper .container{
        max-width: 100%;
    }
    .gallery-item {
        width: 50%;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .animated-gallery .gallery-item img {
        max-width: 597px;
        width: 100%;
    }

}
@media (max-width: 480px){

    .gallery-type-animated{
        width: 100%;
        max-width: 100%;
    }

    .animated-gallery .gallery-item img {
        max-width: 278px;
        width: 100%;
    }

    .gallery-item {
        position: relative;
    }

    .gallery-item, .grid__col-sizer {
        width: 100%;
    }

    .gallery-item-top-margin{

        transform: unset;

    }

    .gallery-container-wrapper .container{
        max-width: 100%;
    }

    .gallery-item {
        margin-bottom: 10px;
    }

    .gallery-item:nth-last-child(2) {
        margin-bottom: 10px;
    }

    .gallery-item:last-child {
        margin-bottom: 12px;
    }

    .gallery-item-top-margin-xxl{
        /*transform: translateY(var(--spacing-xxl));*/
        margin-top: unset;
    }
    .gallery-item-top-margin-xl{
        /*transform: translateY(var(--spacing-xl));*/
        margin-top: unset;

    }
    .gallery-item-top-margin-l{
        /*transform: translateY(var(--spacing-l));*/
        margin-top: unset;

    }
    .gallery-item-top-margin-ml{
        /*transform: translateY(var(--spacing-ml));*/
        margin-top: unset;

    }
    .gallery-item-top-margin-m{
        /*transform: translateY(var(--spacing-m));*/
        margin-top: unset;

    }
    .gallery-item-top-margin-s{
        /*transform: translateY(var(--spacing-s));*/
        margin-top: unset;

    }
    .gallery-item-top-margin-xs{
        /*transform: translateY(var(--spacing-xs));*/
        margin-top:unset;

    }
    .non-animated-gallery .gallery-item {
        max-width: calc(50% - 12px);
    }


}
@media (min-width: 851px) and (max-width: 1400px){

    .animated-gallery .gallery-item img {
        max-width: clamp(37.313rem, -0.18rem + 70.492vw, 61.5rem);
        width: 100%;
    }

}