.image-card {
  position: relative;
  width: 100%;
  height: 250px; /* Set the height of the card */
  border-radius: 20px;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.cover-image,
.overlay {
  width: 100%;
  height: 100%; /* Make sure these cover the entire card */
  object-fit: cover;
  object-position: center; /* Center the image within its container */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

.card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
}

.card-title,
.card-text {
  margin: 0; /* Removes default margin to control spacing */
}