main {
    box-sizing: border-box;
}



.gallery-box {
    max-width: 100%;
    margin: 0;
    height: 108rem;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

.item {
    margin: 10px;
    position: relative;
    z-index: 0;

}
.item figcaption{
    margin:3px;
    font-size: 0.7rem;
    font-weight: 600;
}
.item img {
    position: relative;
    margin: 0;
    max-width: 210px;
    border-radius: 15px;

}

.item:hover img:not(.svg-image){
    filter: brightness(50%);
}

.overlay {
    margin:0;
    position: absolute;
    padding: 10px;
    width: fit-content;
    height: fit-content;
    top: 1%;
    left: 15%;
    color: #fff;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}
.overlay p{
    all:inherit;
    position:relative;
}
.overlay img{
    all:inherit;
    position: relative;
    height: 20px;
    width: 20px;
    top:-41px;
    left: 118px;
    z-index: 1;
}

.item:hover .overlay {
    opacity: 100%;
}

h2 {
    color: #235029;
    font-size: 1.2rem;
    text-align: center;
    margin: 20px 0px;
    letter-spacing: 0.1rem;
    position:relative;
}


@media (min-width: 920px) and (max-width: 1180px) {
    .gallery-box {
        height: 140rem;
    }
}
@media (max-width: 920px){
    .gallery-box {
        height:185rem;
    }
}
@media (max-width: 720px){
    .gallery-box {
        height:232rem;
    }
    .item{
        margin:7px;
    }
    .item img {
        max-width: 180px;
    }
    .overlay{
        left:0px;
    }
}
@media (max-width: 400px){
    .gallery-box {
        height:197rem;
    }
    .item img {
        max-width: 150px;
    }
    .overlay{
        left:-14px;
        top:0;
    }
    
}
@media (max-width: 330px){
    .gallery-box {
        height:186rem;
    }
    .item img {
        max-width: 140px;
    }
    .overlay{
        left:-13px;
    }
    .overlay p{
        font-size:14px;
    }
    .overlay img{
        left:105px;
    }
}