/* Use this file to control the layout of cards (articles) within the
 * main region of the page. */

/* TODO: Map the articles to grid areas */
main > h2 {
  grid-area: heading;
}
main > article:nth-of-type(1) {
  grid-area: article1;
}
main > article:nth-of-type(2) {
  grid-area: article2;
}
main > article:nth-of-type(3) {
  grid-area: article3;
}
main > article:nth-of-type(4) {
  grid-area: article4;
}
main > article:nth-of-type(5) {
  grid-area: article5;
}
main > article:nth-of-type(6) {
  grid-area: article6;
}

/* TODO: Make the main element into a grid to hold the cards */
main {
  display: grid;
}

/* TODO: Tiny and small layouts:
 * All articles in a vertical column using grid-template-areas with
 * the main h2 title at the top. */

@media (max-width: 699px) {
  main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "article1"
      "article2"
      "article3"
      "article4"
      "article5"
      "article6";
  }
}

/* TODO: Medium layouts:
 * Article cards are displayed 2 per row (articles 1 and 2 in the top row,
 * 3 and 4 in the second, 5 and 6 in the third). Use 1vh for row gaps and
 * 2vw for column gaps. Both columns should have the same width. Again,
 * place the main h2 title at the top. */
@media (min-width: 700px) {
  main {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "heading heading"
      "article1 article2"
      "article3 article4"
      "article5 article6";
  }
}

/* TODO: Large layouts:
 * Article cards are now in 3 equal-width columns with the main h2 title
 * at the top. */
@media (min-width: 1000px) {
  main {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "heading  heading  heading"
      "article1 article2 article3"
      "article4 article5 article6";
  }
}

@media print {
  main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  article h3,
  p {
    padding-top: 0;
    padding-bottom: 0;
  }
  main > h2 {
    display: none;
  }
}

/* TODO: Print formatting:
 * Make the main content into a flex-box with the articles
 * in a column with space between the items vertically. Get rid
 * of the vertical padding on the p and h3 elements inside
 * the articles (keeping 1vw padding on the sides).
 * Remove the main h2 title from the display. */