.mygallery { display: flex; flex-wrap: wrap; justify-content: space-between; }
.card { width: 100%; position: relative; margin: 10px 10px 10px 10px; border-radius: 4px; overflow: hidden; }
.card img { height: 100%; width: 100%; filter: grayscale(100%); box-shadow: 0 0 20px #333; object-fit: cover; }
.card:hover { transform: scale(1.03); filter: drop-shadow(0 0 10px #333); transition: 0.3s; }
.card:hover img { filter: grayscale(0%); }
.card:hover div { display: block; }

.card figcaption { position: absolute; bottom: 0; left: 0; padding: 25px; width: 100%; height: 20%; font-size: 16px; font-weight: 500; color: #fff; border-radius: 0 0 10px 10px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(225, 225, 255, 0)100%); transition: 0.3s; opacity: 1; transform: scale(1.03); text-align: center !important; }

.sectitle { display: none; position: absolute; top: 0; left: 0; padding: 20px; width: 100%; font-size: 12px; font-weight: 500; color: #fff; border-radius: 0 0 10px 10px; background: #383838; transition: 0.3s; opacity: 60%; transform: scale(1.03); }
.overlay-text { position: absolute; top: 50%; /* Adjust this value to vertically center the text */ left: 50%; /* Adjust this value to horizontally center the text */ transform: translate(-50%, -50%); /* Center the text precisely */ background-color: #fff; /* Set the background color with some transparency */ color: #fff; /* Set the text color */ padding: 10px 20px; /* Add some padding to the text */ font-size: 20px; /* Adjust the font size */ /*   text-align: center; /* Center the text horizontally */ */ }

@media(min-width: 768px) {
    .card { width: 100%; margin: 10px 10px 10px 10px; border-radius: 7px; }
    .sectitle { padding: 15px; }
}

@media(min-width:1000px) {
    .card { width: 50%; margin: 2px 2px 10px 2px; border-radius: 7px; }
    .sectitle { padding: 15px; }
}

@media(min-width:1200px) {
    .card { width: 32%; margin: 2px 2px 10px 2px; border-radius: 10px; }
    .sectitle { padding: 20px; }
}