/* ======================================
Responsive Image gallery Style rules
======================================*/

* {margin: 0; padding: 0; box-sizing: border-box;}

body {font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;}

.buttoncont {position:absolute; width: 100%; height:50px; margin:0; padding:0;}
.photo-button {position:relative; width:200px; height:0px; padding:0; text-align:center; margin:0 auto}
.photo-button a {float:left; width:200px; height:50px; padding:10px; margin:0 0 10px 0; font-size: 18px;  text-decoration:none; font-weight: bold; background-color: #000; color:#fff;}
.photo-button a:hover {background-color: #777; color:#fff;}

.container {padding: 40px 5%;}

.heading-text {margin: 1rem 0; font-size: 2rem; text-align: center; color:#000}

.heading-text span {font-weight: 100; color:#333}

ul {list-style: none;}

/* Responsive image gallery rules begin*/

.image-gallery {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;}

.image-gallery > li {flex-basis: 350px; /*width: 350px;*/ position: relative; cursor: pointer;}

.image-gallery::after {content: ""; flex-basis: 350px;}

.image-gallery li img {object-fit: cover; max-width: 100%; height: auto; vertical-align: middle; border-radius: 5px;}

.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);}