/* Responsive image gallery rules begin*/
.image-gallery {display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;}
.image-gallery > li {flex-basis: 100px; /*width: 350px;*/ position: relative; cursor: pointer;}
.image-gallery::after {content: ""; flex-basis: 100px;}
.image-gallery li img {object-fit: cover; width: 100%; height: 100%; vertical-align: middle; border-radius: 10px;  box-shadow: 5px 10px 8px #000000;}
.overlay {position: absolute; width: 100%; height: 100%; background: rgba(57, 57, 57, 0.502); top: 0; left: 0; transform: scale(0); transition: all 0.2s 0.1s ease-in-out; color: #fff; border-radius: 5px; /* center overlay text */ display: flex; align-items: center; justify-content: center;}
/* hover */
.image-gallery li:hover .overlay {transform: scale(1);}
a {text-decoration:none; }   
.button {background-color: #4CAF50; border: none; color: white; padding: 6px 22px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; border-radius: 35px; box-shadow: 5px 8px 8px #000000;}
.leaders {background-color: white; color: black; border: 2px solid #008CBA;}
.leaders:hover {background-color: #008CBA; color: white;}
.views {background-color: white; color: black; border: 2px solid #0000FF;}
.views:hover {background-color: #008000; color: white;}