@charset "utf-8";

body {
  margin: 0;
  padding: 0;
}

.contents {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "main"
    "sub";
  gap: 20px;
}
.main {
  grid-area: main;
  background-color: orange;
}
.sub {
  grid-area: sub;
  background-color: purple;
}
@media screen and (min-width: 768px), print {
  .contents {
    grid-template-columns: 1fr 200px;
    grid-template-areas: "main sub";
    max-width: 1200px;
    margin-inline: auto;
  }
}