.gallery { text-align: center; width:100%; margin-top:40px; border:1px solid #CCC }
.gallery img {display: inline-block;width:100%; height:auto;transition:all .5s }
.gallery img:hover { opacity:0.5; transition:all .5s }
.gallery-image { cursor: pointer;  transition: transform 0.2s;transform:scale(.998)}
#myModal { display: none; position: fixed; z-index: 1000; inset: 0; background-color: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center;}
#modalImage { max-width: 90%; max-height: 80%; box-shadow: 0 0 20px #fff;z-index: 1;}
#myModal button { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; background: none; color: white; border: none; cursor: pointer; user-select: none; padding: 10px;z-index: 2; }
#myModal button:hover { background-color: rgba(255, 255, 255, 0.2); }
.prev {left: 20px;}
.next {right: 20px;}
#myModal .close {position: absolute; top: 15px; right: 30px; font-size: 2rem; color: white; cursor: pointer; z-index: 2;}