img {
  max-width: 100%; /* Ensures the image scales down if the container is smaller, but doesn't exceed its original size */
  height: auto;    /* Automatically maintains the aspect ratio */
}

.container {
  display: flex; /* Activates Flexbox layout */
  align-items: center; /* Vertically centers the items */
  gap: 20px; /* Adds space between the image and text */
  flex-wrap: wrap; /* Allows items to wrap onto a new line on small screens */
}

.image-column img {
  max-width: 100%; /* Ensures the image is responsive and stays within its container */
  height: auto;
  display: block; /* Removes extra space below the image */
}

.image-column, .text-column {
  flex: 1; /* Distributes available space equally */
  padding: 10px;
  box-sizing: border-box; /* Ensures padding/border are included in the element's total width */
}

/* Media query to stack items vertically on small screens */
@media (max-width: 650px) {
  .container {
      flex-direction: column; /* Stacks the items vertically for mobile devices */
  }
}