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: 60vw;
  height: 60vh;
  display: grid;
  grid-gap: 1vh;
  margin: 0vh auto;
}

.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;
  }
  .grid-container{
    background-color: #fff;
    width: 90vw;
    height: 90vh;
    display: grid;
    grid-gap: 1vh;
    margin: 0vh auto;
  }
  .section-title.with-desc .title-header::before{
    margin-left: 20px;
  }
  .model-visualization .title-header h2{
    margin: 0 20px;
  }
 
}


@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;
  }
  .grid-container{
    background-color: #fff;
    width: 90vw;
    height: 90vh;
    display: grid;
    grid-gap: 1vh;
    margin: 0vh auto;
  }
  .section-title.with-desc .title-header::before{
    margin-left: 20px;
  }
  .model-visualization .title-header h2{
    margin: 0 20px;
  }
}