/* ------------------------------
   Assignment 7 - Responsive Web Design
---------------------------------- */

/* Make header blue for visibility */
h1 {
  color: blue;
}

/* Base layout: stacked by default (mobile-first) */
.wrapper {
  max-width: 900px;      /* keeps content centered */
  margin: 0 auto;
  padding: 10px;
}

/* Make the image resize automatically */
img {
  max-width: 100%;       /* image never exceeds container width */
  height: auto;          /* keeps correct proportions */
  display: block;
  margin-top: 10px;
  border-radius: 8px;    /* soft rounded corners */
}

/* --------------------------------------
   Responsive behavior for smaller screens
   When the screen width is 900px or less,
   stack text and image vertically.
--------------------------------------- */
@media (max-width: 900px) {
  h1 {
    font-size: 1.4em;
  }

  p {
    font-size: 0.95em;
  }

  /* Stack layout vertically for smaller screens */
  .wrapper {
    display: block;
  }

  .image {
    margin-top: 15px;
  }
}

/* --------------------------------------
   Responsive behavior for larger screens
   When width is above 900px, show text
   and image side-by-side using flexbox.
--------------------------------------- */
@media (min-width: 901px) {
  .wrapper {
    display: flex;       /* side-by-side layout */
    gap: 20px;           /* space between columns */
    align-items: flex-start;
  }

  .text,
  .image {
    flex: 1;             /* equal width columns */
  }
}