body {
  margin: 0;
  padding: 0;
  font-family: Google Sans, Noto, Roboto, Helvetica Neue, sans-serif;
}

model-viewer {
  width: 100%;
  height: 100%;
}

.grid-container{
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-gap: 0px;
}

.a {
  grid-column: 1 / 5;
  grid-row: 1 / 7;
}
.b {
  grid-column: 5 / 9;
  grid-row: 1 / 7;
}
.c {
  grid-column: 9 / 13;
  grid-row: 1 / 7;
}

@media (max-width: 880px) {
  .a {
    grid-column: 1 / 8;
    grid-row: 1 / 7;
  }
  .b {
    grid-column: 8 / 13;
    grid-row: 1 / 4;
  }
  .c {
    grid-column: 8 / 13;
    grid-row: 4 / 7;
  }
}


@media (max-width: 480px) {
  .a {
    grid-column: 1 / 13;
    grid-row: 1 / 5;
  }
  .b {
    grid-column: 1 / 7;
    grid-row: 5 / 7;
  }
  .c {
    grid-column: 7 / 13;
    grid-row: 5 / 7;
  }
}