main {
  width: 100%;
}

.hero {
  display: block;
  width: 100%;
  /* max-width: 1400px; */
  height: 100vh;
  /* aspect-ratio: 16/9; */
  margin: 0 auto 0;
  background: rebeccapurple;
}

.boxes {
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  margin: 0 auto 0;
  gap: 10px;
  padding: 10px;
}

.box {
  width: 100%;
  aspect-ratio: 1/1;
  background: blue; 
}