body.awg-lightbox-open{
    overflow:hidden;
}

/*.awg-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:20px;
}*/
.awg-grid{
	column-width: 260px;
    column-gap: 20px;
}

.awg-item{
    position:relative;
    overflow:hidden;
    border-radius:12px;
    background:#f5f5f5;
	break-inside: avoid;
    margin-bottom: 20px;
}


.awg-item img{
    width:100%;
    height:auto !important;
    display:block;
    transition:transform .4s ease;
	object-fit: cover;
}

.awg-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity .3s ease;
}

.awg-overlay svg {
	width: 30px;
	margin-bottom: 10px;
}

.awg-overlay span{
    color:#fff;
    font-size:16px;
    font-weight:600;
    text-align:center;
    padding:10px;
}

.awg-item:hover img{
    transform:scale(1.08);
}

.awg-item:hover .awg-overlay{
    opacity:1;
}

.awg-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom:20px;
}

.awg-filters button{
    border-radius: 6px;
	background: none;
	cursor: pointer;
	transition: all .3s ease;
	font-family: "Roboto", Sans-serif;
	font-weight: 600;
	color: #949aa0;
	text-transform: initial;
	border: 2px solid #cdcdcd;
	padding: 10px 20px;
}
.awg-active {
	color: #fff !important;
	background: #2982D7 !important;
	border: 2px solid transparent !important;
}

.awg-filters button:hover,
.awg-filters button:active,
.awg-filters button:focus{
    background: #2982D7;
	border: 2px solid transparent;
}

#awg-lightbox{
    position:fixed;
    inset:0;

    background: rgba(0,0,0,.8);
	backdrop-filter: blur(12px);
    -webkit-backdrop-filter:blur(12px);

    z-index:99999;
}

#awg-lightbox img{
    max-width:90%;
    max-height:90%;
    position:absolute;
    top:50%;
    left:50%;

    transform:translate3d(-50%,-50%,0);

    will-change: transform, opacity;
    backface-visibility:hidden;
}

#awg-lightbox .close{
    position:absolute;
    top:15px;
    right:25px;
    color:#fff;
    font-size:42px;
    line-height:1;
    cursor:pointer;
}

.awg-admin-item input[type="text"]{
    min-width:180px;
}

.awg-prev,
.awg-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    font-size:48px;
    cursor:pointer;
    z-index:100000;
    user-select:none;
}

.awg-prev{
    left:20px;
}

.awg-next{
    right:20px;
}

.awg-prev:hover,
.awg-next:hover{
    opacity:.7;
}

.awg-slide-out-left{
    animation: awgSlideOutLeft .18s forwards;
}

.awg-slide-out-right{
    animation: awgSlideOutRight .18s forwards;
}

.awg-slide-in-left{
    animation: awgSlideInLeft .18s forwards;
}

.awg-slide-in-right{
    animation: awgSlideInRight .18s forwards;
}

#awg-lightbox{
    animation:awgLightboxFade .25s ease;
}

@keyframes awgLightboxFade{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes awgSlideOutLeft{

    from{
        opacity:1;
        transform:
            translate(-50%,-50%)
            translateX(0);
    }

    to{
        opacity:0;
        transform:
            translate(-50%,-50%)
            translateX(-90px);
    }

}

@keyframes awgSlideOutRight{

    from{
        opacity:1;
        transform:
            translate(-50%,-50%)
            translateX(0);
    }

    to{
        opacity:0;
        transform:
            translate(-50%,-50%)
            translateX(90px);
    }

}

@keyframes awgSlideInLeft{

    from{
        opacity:0;
        transform:
            translate(-50%,-50%)
            translateX(-90px);
    }

    to{
        opacity:1;
        transform:
            translate(-50%,-50%)
            translateX(0);
    }

}

@keyframes awgSlideInRight{

    from{
        opacity:0;
        transform:
            translate(-50%,-50%)
            translateX(90px);
    }

    to{
        opacity:1;
        transform:
            translate(-50%,-50%)
            translateX(0);
    }

}

.awg-lightbox-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:20px 30px;
    background: linear-gradient( to top, rgba(0,0,0,.85), rgba(0,0,0,.65), transparent );
    color:#fff;
    font-size:16px;
    font-weight:500;
    text-align:center;
    z-index:100001;
    pointer-events:none;
}
#awg-lightbox img{
    -webkit-user-drag: none;
    user-select: none;
}

#awg-lightbox{
    touch-action: pan-y;
}


@media(max-width:768px){

    .awg-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:480px){

    .awg-grid{
        grid-template-columns:1fr;
    }

    .awg-admin-item{
        flex-direction:column;
        align-items:flex-start;
    }

}