.page {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 0.8rem;
}
.hero { grid-area: h; }
  .intro { grid-area: i; }
  .mark { grid-area: m; }
  .registration-area { grid-area: r; }
  .side-bar { grid-area: s; }
/* page grid */ 
@media (min-width: 800px) {
  .page {
    
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Creates a 12-column grid */
    grid-template-rows: auto;
    grid-gap: .3rem;
    grid-template-areas: 
    "h h h h h h h h m m m m"
    "i i i i i i i i m m m m"
    "r r r r r r r s s s s s"
    
     ;
  }
  
}
@media (min-width: 1300px) {
  .page {
    max-width: 80rem;
    margin: 0 auto;
    grid-gap: 1rem;
    grid-template-areas: 
      "h h h h h h h h h m m m"
      "i i i i i i i i i m m m"
      "r r r r r r r r s s s s"
      "r r r r r r r r s s s s"
     ;
  }
}