/* The container must have a relative position */
.image-container {
  position: relative; /* Establishes a positioning context for absolute children */
  display: inline-block; /* Helps wrap the container tightly around the image */
}

/* The text overlay must have an absolute position */
.text-overlay {
  position: absolute;
  top: 20px; /* Adjust top, bottom, left, right to position the text */
  left: 20px;
  color: black; /* Makes text visible against a dark image */
  background-color: rgba(
    0,
    0,
    0,
    0.5
  ); /* Optional: Adds a semi-transparent background */
  padding: 10px;
  border-radius: 5px;
}

/* Optional: Style the image itself */
.image-container img {
  display: block; /* Removes default bottom margin/spacing issues with images */
  width: 100%; /* Makes image responsive within its parent */
  height: auto;
}