.image-container {
    position: relative;
    overflow: hidden;
  }
  .image-container img {
    transition: transform 0.5s;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .image-container:hover img {
    transform: scale(1.1);
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: white;
    transition: box-shadow 0.5s;
  }
  .image-container:hover .overlay {
    box-shadow: rgba(0, 0, 0, 0.45) 0px -40px 80px 10px inset;
  }
  /* .text {
    display: none;
    transition: display 0.5s;
  } */
  .image-container:hover .text {
    display:block;
  }

  /* Aplicar los estilos de hover en pantallas medianas o más pequeñas */
@media (max-width: 768px) {
  .image-container img {
    transform: scale(1.1);
  }

  .overlay {
    box-shadow: rgba(0, 0, 0, 0.45) 0px -40px 80px 10px inset;
  }

  /* .text {
    display: block;
  } */
}