.gallery {
    margin: 80px 0;
}
.gallery-subtitile {
    text-align: center;
    font-size: 18px;
    font-weight: 300;
}
.gallery-item {
    cursor: pointer;
    height: 300px;
}
.gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
}
.gallery-item a:before {
    display: none;
}
.gallery-item a div {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 4px);
    background-color: var(--green);
    opacity: 0;
    transition: all .3s;
    pointer-events: none;
}
.gallery-item:hover::before {
    opacity: .5;
}
.gallery-item::after {
    content: '';
    width: 100px;
    height: 100px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('/local/templates/aspro-resort/img/zoom.png');
    opacity: 0;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    transition: all .3s;
    pointer-events: none;
}
.gallery-item:hover::after {
    opacity: 1;
}
.gallery-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* aspect-ratio: 1 / 1; */
}


@media (max-width: 1000px) {
    .gallery-list {
        margin-top: 40px;
    }
}