/* LIVE Rosenau */

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

/*
.magazine {
  --w: 49.33%;
}
*/
.magazine main article > h1:first-child {
  color: var(--color-primary);
}
.magazine main article h2, 
.magazine main article h3 {
  font-size: var(--step-0);
}
.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;
    /*--size: 560px;*/
    /*--size: calc(calc(6 * var(--grid-12-column)) + calc(5 * var(--grid-12-gap)));*/
  }
  .magazine main article > *:nth-child(2) {
    margin-block-start: 0;
  }
  .magazine main article > * + *:where(h1, aside) {
    margin-block-start: 0;
  }
  .magazine main article > h1:first-child, 
  /*.magazine main article > figure:first-child, */
  .magazine main article > aside {
    position: absolute;
    /*width: 23.98%;*/
    width: var(--grid-sidebar);
  }
  .magazine main article > aside  {
    top: var(--padding);
    right: 0;
  }
  .magazine main article > figure:first-child {
    position: absolute;
    /*width: 15.98%;*/
    /*width: calc(2 * var(--grid-12-column) + 1 * var(--grid-12-gap));*/
    width: var(--grid-picture);
    margin-block-start: 0;
  }
  .magazine main article > figure:first-child img {
    width: 100%;
  }
  .magazine main article > :not(h1:first-child):not(figure:first-child):not(aside) {
    margin-inline: auto;
    /*max-inline-size: var(--size);*/
    inline-size: var(--grid-content);
    /*margin-bottom: 0;
    margin-top: 2em;*/
  }
}