/* Basic page styling */
body {
  font-family: sans-serif;
  padding: 20px;
  background-color: beige; /* Beige */
}

/* Grid container */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

/* Box styles */
.box {
  background: #fff;
  padding: 10px;
  border: 1px solid #ccc;
}

/* Image */
img {
  max-width: 100%;
  height: auto;
}

/* Make layout stack on small screens */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

/* Comments:
- Grid layout shows 2 boxes side by side on big screens
- Media query stacks them on small screens (mobile)
*/