body {
  background-color: grey;
}
.image-container {
  position: relative; /* Essential for positioning the text inside */
  display: inline-block; /* Allows the container to wrap the image */
  width: 40vh; /* Matches the image width */
  height: 100%; /* Matches the image height */
}
.caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: black;
  font-family: sans-serif;
  font-size: 2vw;
  font-weight: normal;
  pointer-events: none; 
  width: auto;
  height: auto;
}
#Img {
  width: 30vw;
  height: auto;
  border: 2px ridge black;
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  animation-duration: 0.5;
}
#Img:hover {
  border: 3px outset black;
  width: calc(30vw + 2px);
}
#Img:active {
  width: calc(30vw - 1px) !important;
  border: 4px inset black !important;
}