/* we have fixed element but the only scroll is on the body,
  so scrolling anywhere on the page works */


body > header{
  position: sticky;
  top: 0;
  z-index: 2;
}
body > section.grid-display{
  display: grid;
  grid-template-columns: 40% 60%;
  position: relative;
}
body > section.grid-display > *{
  padding: var(--lh);
  box-sizing: border-box;
}

body > section.grid-display > .column-fixed > *{
  position: sticky;
  top: calc(var(--lh) * 4);
}


body.all-typo > section.grid-display{
  grid-template-columns: 1fr !important;
}
.all-typo .column-scroll{
  display: none;
}

/* RESPONSIVE
 =========================================================================== */

/* one column break */
@media only screen and (max-width: 1050px) {
  /* one column when smaller */
  :root{
    --fs-display: clamp(3rem, 16vw, 6rem);
  }

  body > section.grid-display{
    grid-template-columns: 1fr !important;
    padding: var(--lh);
  }
  
  /* remove column containers */
  section.grid-display > div{
    display: contents;
  }

  /* remove sticky */
  body > section.grid-display > .column-fixed > *{
    position: relative;
    top: 0;
  }

  /* calendar */
  body.calendar #moon-watch-section{
    order: 0;
  }
  body.calendar #about-section{
    order: 1;
  }
  body.calendar #calendar-section{
    order: 2;
  }

}

/* mobile */
@media only screen and (max-width: 680px) {
  /* one column when smaller */
  :root{
    --fs-display: clamp(3rem, 16vw, 6rem);
  }

  body > section.grid-display{
    grid-template-columns: 1fr !important;
    padding: var(--lh) calc(var(--lh) * 0.5);
  }
}