a {
  color: $primary;

  &:hover {
    @extend .grey-text, .text-lighten-3;
    transition: color 0.5s;

    text-decoration: none;
  }

  &.colour-invert {
    @extend .grey-text, .text-lighten-3;

    &:hover {
      color: $primary;
    }
  }
}

h1.page-title {
  font-weight: 300;
  font-size: 4rem;
  margin-top: 1rem;
}

.header-image-spacer {
  height: 1rem;
}

.header-image {
  height: calc(40vh - #{$navbar-height});

  @media #{$medium-and-down} {
    height: calc(60vh - #{$navbar-height});
  }

  // Fix darkreader weirdness
  .parallax {
    position: initial;
    width: 100%;
    height: 100%;
  }
}

.page-list {
  .card {
    background-color: transparent;
    box-shadow: none;
  }

  .card + .card {
    margin-top: 2rem;
  }

  .card-image {
    max-width: 25% !important;
    margin: auto 0;
  }

  @media #{$small-and-down} {
    .card {
      display: initial;
    }

    .card-image {
      max-width: initial !important;
    }
  }
}