/*body{*/
/*    margin: 20px;*/
/*    background-color: rgb(255, 255, 255);*/

/*}*/

/*ul{*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    list-style: none;*/
/*    cursor: pointer;*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 10px;*/
/*    li{*/
/*        height: 35vh;*/
/*        flex-grow: 1;*/
/*    }*/
/*    img{*/
/*        min-width: 100%;*/
/*        max-height: 100%;*/
/*        display: block;*/
/*        object-fit: cover;*/
/*        border-radius: 5px;*/
/*        transition: .2s linear;*/
/*    }*/
/*    :hover img{*/
/*        transform: scale(1.01);*/
/*        border: 2px solid red;*/
/*    }*/
/*}*/
/*@media screen and (max-width:765px) {*/
/*    ul{*/
/*        gap: 8px;*/
/*        li{*/
/*           width: 100%;*/
/*           height: auto;*/
/*        }*/
/*        img{*/
/*            min-width: 0;*/
/*            width: 100%;*/
/*        }*/
/*    }*/
/*}*/
/*.popup-image{*/
/*    position: fixed;*/
/*    top: 0;left: 0;*/
/*    background-color: rgb(0,0,0,0.9);*/
/*    height: 100%;*/
/*    width: 100%;*/
/*    z-index: 100;*/
/*    display: none;*/
/*}*/
/*.popup-image span{*/
/*    position: absolute;*/
/*    top: 0;right: 10px;*/
/*    font-size: 60px;*/
/*    font-weight: bold;*/
/*    color: #fff;*/
/*    cursor: pointer;*/
/*    z-index: 100;*/
/*}*/
/*.popup-image img{*/
/*    position: absolute;*/
/*    top: 50%;left: 50%;*/
/*    transform: translate(-50%,-50%);*/
/*    border:5px solid #fff;*/
/*    border-radius: 5px;*/
/*    width: 750px;*/
/*    object-fit: cover;*/
/*}*/
/*@media screen and (max-width:768px) {*/
/*    .popup-image img{*/
/*        width: 95%;*/
/*    }*/
/*}*/
body{
    margin: 20px;
    background-color: rgb(255, 255, 255);

}

.images{
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    gap: 10px;
    
}
img {    
       
        display: block;
        object-fit: cover;
        border-radius: 5px;
        transition: .2s linear;
    }
    :hover img{
        transform: scale(1.01);
        border: 2px solid red;
    }
@media screen and (max-width:765px) {
    .images{
        gap: 8px;
        .images{
           width: 100%;
           height: auto;
        }
        img{
            min-width: 0;
            width: 100%;
        }
    }
}
.popup-image{
    position: fixed;
    top: 0;left: 0;
    background-color: rgb(0,0,0,0.9);
    height: 100%;
    width: 100%;
    z-index: 100;
    display: none;
}
.popup-image span{
    position: absolute;
    top: 0;right: 10px;
    font-size: 60px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    z-index: 100;
}
.popup-image img{
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%,-50%);
    border: 5px solid #fff;
    border-radius: 5px;
    width: 750px;
    object-fit: cover;
}
@media screen and (max-width:768px) {
    .popup-image img{
        width: 95%;
    }
}