/* 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: 1fr 40%;
  position: relative;
}
body > section.grid-display > *{
  padding: var(--lh);
  padding-top: calc(var(--lh) * 1);
}

aside.moon-watch{
  position: fixed;
  top: calc(var(--lh) * 3);   /* the height of the header */
  right: 0;
  /* half minus half of the grid-gap */
  width: 40%;
  box-sizing: border-box;
}

body > section.grid-display::before{
  /* content: ""; */
  position: fixed;
  inset: 0;
  top: calc(var(--lh) * 3);   /* the height of the header */
  height: calc(var(--lh) * 2);
  background: linear-gradient(var(--c-light) 33%, transparent);
  pointer-events: none;
  z-index: 2;
}

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

  body > section.grid-display{
    grid-template-columns: 1fr;
  }
  body > section.grid-display::before{
    height: calc(var(--lh) * 1);
  }
  section.grid-display > aside.moon-watch{
    position: static;
    width: auto;

    order: 0;
    padding-top: calc(var(--lh) * 1);
    padding-bottom: 0;
  }
  section.grid-display > main{
    padding-top: calc(var(--lh) * 1);
    /* padding-bottom: 0; */
  }

  body > section.grid-display > *{
    padding-left: calc(var(--lh) * 0.5);
    padding-right: calc(var(--lh) * 0.5);
  }


  /* gallery */
  body:not(.gallery) section.grid-display > main{
    order: 1;
    padding-top: 0;
  }
}