/* The CV's layout, shared by its own page (index.tpl.html, inlined by
render.ts) and the blog's CV page (blog/build.ts): the columns the content's
classes ask for, the photo next to the personal details, and the space between
jobs. Fonts, colours and sizes stay in each page's own style. Narrow screens
get one column; the PDF's A4 page is wider than 40rem. Prose stays within
about 75 characters a line, the width of the career history's right column. */

#personal-details img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 40rem) {
  .two-col-grid > div {
    display: grid;
    grid-template-columns: 7fr 3fr;
    grid-gap: 2%;
  }

  .two-col-grid.equal-cols > div {
    grid-template-columns: 1fr 1fr;
  }

  .two-col-grid.large-right-col > div {
    grid-template-columns: 26fr 74fr;
  }
}

@media not (min-width: 40rem) {
  #personal-details img {
    max-width: 10rem;
  }
}

.align-end {
  align-items: end;
}

.career-history section {
  margin-bottom: 1rem;
}

#about-me p {
  max-width: 38rem;
}

.grid-header h3 {
  margin-bottom: 0;
}

.grid-header + .grid-row p {
  margin-top: 0.5rem;
}

#education .grid-row + .grid-row {
  margin-top: 0.5rem;
}

.career-history li {
  margin-bottom: 0.65rem;
}