section.symbols a, section.symbols a:active, section.symbols a:hover {
  color: initial;
}

section.symbols a h1 {
  color: var(--petrol);
}

section.symbols a:hover h1 {
  color: var(--red);
}

section.symbols .symbol {
  display: block;
  margin: 2rem 0;
}

section.symbols .symbol header {
  padding: 0 0.5rem;
  text-align: center;
}

section.symbols .symbol header img {
  width: 100%;
  max-width: 10rem;
}

section.symbols .symbol main {
  padding: 0 0.5rem;
  text-align: center;
}

section.symbols .symbol main h1 {
  font-size: 1.5em;
}

@media screen and (min-width: 60rem) {
  section.symbols {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
  }

  section.symbols .symbol {
    width: 33.3%;
  }
}