/*
 * About page-specific styling.
 */

/*
 * Default grid is for mobile.
 */

.wrapper {
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(16, auto) 4rem 1rem;
  grid-gap: 1.5rem;
  grid-template-areas:
    "logotype"
    "top-nav"
    "about"
    "principles"
    "principles-notes"
    "diversity"
    "diversity-notes"
    "relevance"
    "relevance-notes"
    "design"
    "design-notes"
    "commitment"
    "."
    "company-nav"
    "resources-nav"
    "elsewhere-nav"
    "logo"
    "copyright";
}

.principles {
  grid-area: principles;
}

.principles-notes {
  grid-area: principles-notes;
}

.diversity {
  grid-area: diversity;
}

.diversity-notes {
  grid-area: diversity-notes;
}

.relevance {
  grid-area: relevance;
}

.relevance-notes {
  grid-area: relevance-notes;
}

.design {
  grid-area: design;
}

.design-notes {
  grid-area: design-notes;
}

.margin-notes {
  font-family: "Source Sans Pro", sans;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.5rem;
}

.margin-notes ul {
  padding: 0;
}

.about {
  grid-area: about;
}

.commitment {
  grid-area: commitment;
}

/*
 * Media queries for more expansive page sizes.
 */

@media (min-width: 640px) {
  .wrapper {
    margin-top: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(7, auto) repeat(4, 6rem);
    grid-gap: 1.5rem 2rem; /* row gap is exactly 1 line-height, column gap slightly wider. */
    grid-template-areas:
      "logotype     logotype     top-nav       top-nav       "
      "about        about        about         .             "
      "principles   principles   principles    principles-notes    "
      "diversity    diversity    diversity     diversity-notes"
      "relevance    relevance    relevance     relevance-notes"
      "design       design       design        design-notes   "
      "commitment   commitment   commitment    .             "
      ".            .            .             .             "
      "logo         company-nav  resources-nav elsewhere-nav "
      ".            company-nav  resources-nav elsewhere-nav "
      ".            .            .             copyright     ";
  }
}

@media (min-width: 960px) {
  /*
   * Here we have enough space to fix the grid area sizes for the
   * ideal typography and page flow.
   */
  .wrapper {
    margin-top: 2.5rem;
    margin-left: 4rem;

    display: grid;
    grid-template-columns: repeat(4, 12rem);
    grid-template-rows: repeat(2, 6rem) repeat(6, auto) repeat(4, 6rem);
    grid-gap: 1.5rem 2rem; /* row gap is exactly 1 line-height, column gap slightly wider. */
    grid-template-areas:
      "logotype     logotype     top-nav       top-nav       "
      "logotype     logotype     top-nav       top-nav       "
      "about        about        about         .             "
      "principles   principles   principles    principles-notes  "
      "diversity    diversity    diversity     diversity-notes"
      "relevance    relevance    relevance     relevance-notes"
      "design       design       design        design-notes   "
      "commitment   commitment   commitment    .             "
      ".            .            .             .             "
      "logo         company-nav  resources-nav elsewhere-nav "
      ".            company-nav  resources-nav elsewhere-nav "
      ".            .            .             copyright     ";
  }
}