* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main {
  background-color: violet;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  grid-template-rows: auto; /* Single row initially */
  grid-template-areas: "box1 box2 box3"; /* Layout of items */
}

.box {
  background-color: aqua;
  padding: 15px;
  margin: 10px;
  min-height: 200px;
}

.box1 {
  grid-area: box1; /* Places Box1 in its defined grid area */
}

.box2 {
  grid-area: box2; /* Places Box2 in its defined grid area */
}

.box3 {
  grid-area: box3; /* Places Box3 in its defined grid area */
}

/* Responsive Design for Tablets */
@media (max-width: 768px) {
  .main {
    grid-template-columns: 1fr 1fr; /* Two columns */
    grid-template-rows: auto auto; /* Two rows */
    grid-template-areas:
      "box1 box2"
      "box3 box3"; /* Box3 spans two columns */
  }
}

/* Responsive Design for Mobile */
@media (max-width: 480px) {
  .main {
    grid-template-columns: auto; /* Single column */
    grid-template-rows: auto auto auto; /* Three rows */
    grid-template-areas: 
      "box1"
      "box2"
      "box3"; /* Boxes stack vertically */
  }
}