header,
main {
  background-color: var(--pale); }

section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  column-gap: var(--mainpad); }
  @media (max-width : 900px) {
    section {
      grid-template-columns: repeat(4, 1fr);
      row-gap: var(--mainpad); } }
  section > div {
    margin-bottom: 4rem; }
    section > div .aspectholder {
      height: 44vw;
      position: relative;
      margin-bottom: 1em; }
    section > div h2 {
      margin-bottom: 1em; }
    section > div[portrait] {
      grid-column: 5/11; }
      section > div[portrait] .aspectholder {
        width: 66%; }
      section > div[portrait] .article-content {
        display: grid;
        column-gap: var(--mainpad);
        grid-template-columns: repeat(6, 1fr); }
        section > div[portrait] .article-content div {
          grid-column: 3/7; }
      @media (max-width : 900px) {
        section > div[portrait] {
          grid-column: 1/5; }
          section > div[portrait] .aspectholder {
            width: 100%;
            height: 150vw; }
          section > div[portrait] .article-content {
            display: grid;
            column-gap: var(--mainpad);
            row-gap: var(--mainpad);
            grid-template-columns: repeat(1, 1fr); }
            section > div[portrait] .article-content div {
              grid-column: 1; } }
    section > div[landscape] {
      grid-column: 3/11; }
      @media (max-width : 900px) {
        section > div[landscape] {
          grid-column: 1/5; } }
      section > div[landscape] .article-content {
        display: grid;
        column-gap: var(--mainpad);
        row-gap: var(--mainpad);
        grid-template-columns: repeat(8, 1fr); }
        section > div[landscape] .article-content div {
          grid-column: 5/9; }
      @media (max-width : 900px) {
        section > div[landscape] {
          grid-column: 1/5; }
          section > div[landscape] .aspectholder {
            width: 100%;
            height: 60vw; }
          section > div[landscape] .article-content {
            display: grid;
            column-gap: var(--mainpad);
            grid-template-columns: repeat(1, 1fr); }
            section > div[landscape] .article-content div {
              grid-column: 1; } }