/* 1. The container */
.img-container {
  height: 196px; /* Set a fixed height as needed */
  width: 348px; /* Adjust width as needed */
  overflow: hidden; /* Hides the zoomed part outside the container */
  
}

/* 2. The image inside the container */
.zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the container well */
  transition: transform 0.5s ease; /* Smooth animation over 0.5 seconds */
  display: block; /* Helps with centering/display issues */
  
}

/* 3. The zoom effect on hover */
.img-container:hover .zoom-img {
  transform: scale(1.2); /* Zooms in 1.2 times its original size */
}