.container {
  flex-direction: column;
}

section + section.container {
  padding-top: 2rem;
}

.hero {
  background-color: rgb(var(--pri));
  color: white;
  padding: .5em 0;
}

.hero h1 {
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 3em;
  line-height: 1.2em;
}

.about {
  color: hsl(var(--pri-hue), 90%, 10%);
}

.about * + * {
  margin-top: .5rem;
}

.about h2 {
  margin: .5rem 0 0;
}

.about p {
  font-size: 1em;
}

.about a {
  color: rgb(var(--pri));
}

.about ul, .about ol {
  text-align: left;
  list-style-type: disc;
  list-style-position: inside;
  margin-left: .5rem;
}

.about ol {
  list-style-type: decimal;
}

.person {
  display: grid;
  border-top: 1px solid hsla(var(--pri-hue), 90%, 10%, 30%);
  padding-top: 2rem;
  margin-top: 2rem;
}

.person img {
  height: 20rem;
  margin: 0 auto .5rem;
  border-radius: .5em;
}

.person h2 {
  margin: 0;
  text-align: center;
}

.person a {
  text-decoration: none;
  font-weight: bolder;
  transition: opacity .2s;
}

.person a:hover,
.person a:focus {
  opacity: .5;
}

.person .read-more {
  margin-left: .5rem;
}

@media (max-width: 666px) {
  .about {
    text-align: center;
  }

  .about ul, .about ol {
    margin: 1rem 0;
  }
}