/* R */

/*
TODO
- move class to article tag?
- vertical rhythm: stack or flow?
*/

/* typography */
.magazine main article > h1:first-child {
  color: var(--color-primary);
}

/* layout */
.magazine main article > * + * {
  margin-block-start: var(--margin);
}
.magazine main article > figure:first-child {
  width: fit-content;
}
@media screen and (min-width: 64em) {
  .magazine main article {
    position: relative;
  }
  /* main area */
  .magazine main article > *:nth-child(2) {
    margin-block-start: 0;
  }
  .magazine main article > :not(h1:first-child):not(figure:first-child):not(aside) {
    margin-inline: auto;
    inline-size: var(--grid-content);
  }
  /* sidebars */
  .magazine main article > * + *:where(h1, aside) {
    margin-block-start: 0;
  }
  .magazine main article > h1:first-child, 
  .magazine main article > aside {
    position: absolute;
    width: var(--grid-sidebar);
  }
  .magazine main article > aside  {
    top: var(--padding);
    right: 0;
  }
  .magazine main article > figure:first-child {
    position: absolute;
    width: var(--grid-picture);
    margin-block-start: 0;
  }
  /*
  .magazine main article > figure:first-child img {
    width: 100%;
  }
  */
}