styles.css

body {
  font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0;
  font-weight: 500;
}

.header, .footer {
  position: relative;
  max-width: 100%;
  padding: 15px;
  box-shadow: 0px 0px 10px 0px;
  
  /* visibility: hidden; */
}


.wrapper {
  max-width: 100%;
  position: relative;

  /* For demo only */
  padding: 30px;
  margin: 30px auto;
}

.intro, .main-content, .other-content {
  padding: 15px;
  margin: 30px 0;

  /* For demo only */
  min-height: 27.5vh;
}

.intro {
  background: #FF4848;
}

.main-content {
  background: #5757FF;

}

.other-content {
  background: #1FCB4A;
}

@media(min-width:992px) {
  .wrapper {
    padding: 0;
    width: 960px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 30px;
  }

  .main-content {
    grid-column: 2/3;
    grid-row: 1/3;
  }

  .intro, .main-content, .other-content {
    margin: 0;
  }

}