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

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

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

section.cards .card {
  display: block;
}

section.cards .card header img {
  width: 100%;
}

section.cards .card main {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

section.cards .card main h1 {
  font-size: 1.5em;
  text-align: center;
}

@media screen and (min-width: 40rem) {
  section.cards {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
  }

  section.cards .card {
    width: 50%;
  }

  section.cards .card header {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  section.cards .card main p {
    text-align: center;
  }
}

@media screen and (min-width: 60rem) {
  section.cards {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
  }

  section.cards .card {
    width: 33.3%;
  }
}