:root {
  --text-colour: #464646;
  --link-color: #8b312a;
  --gray-1: #f0f0ee;
  --gray-2: #c8c8c8;
  --gray-3: #aaaaaa;
  --gray-4: #969696;
  --gray-5: #646464;
  --gray-6: #464646;
  --gray-7: #1e1e1e;
  --turquoise: #49ceca;
  --slightly-dark-turquoise: #36c8c3;
  --dark-turquoise: #38a19d;
  --pink: #ffa3ba;
  --brown: #9b6752;
  --success: #28a745;
  --fail: #dc3545;
}

* {
  box-sizing: border-box;
}

@font-face {
  font-family: "geomanist";
  src: url("fonts/geomanist-medium-webfont.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "geomanist-bold";
  src: url("fonts/geomanist-bold-webfont.woff2") format("woff2");
  font-display: swap;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "PT Sans";
  font-size: 1.8rem;
  line-height: 1.5;
  color: var(--text-colour);
  background-color: var(--gray-1);
}

.site-header {
  background-color: var(--gray-7);
  color: #fff;
  padding: 1.6rem 0;
}

.site-header__logo {
  display: block;
  margin: 0 auto;
  height: 2.4rem;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  padding: 0 2.4rem;
}

main {
  padding: 2.4rem 0 7.2rem;
}

.ai--s {
  align-items: stretch;
}

.ai--c {
  align-items: center;
}

h1, h2 {
  font-family: "geomanist-bold";
  color: #000;
  line-height: 1.2;
}

h1 {
  font-size: 4.8rem;
  margin-bottom: 1em;
}

h2 {
  font-size: 2.4rem;
  margin-bottom: .8em;
}

a {
  color: var(--link-color);
}

.card-grid {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: -1.2rem;
  margin-bottom: 1.2rem;
}

.card {
  margin: 1.2rem;
  flex: 1;
  min-width: 34rem;
  background-color: #fff;
  padding: 2.4rem 3.2rem 3.2rem;
  border-radius: .8rem;
  overflow: hidden;
}

.card--link {
  padding: 0;
}

.card--link a {
  display: flex;
  padding: 2.4rem;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: background-color .3s;
}

.card--link a:hover {
  background-color: var(--turquoise);
  color: #fff;
}

.card--link a:hover h2 {
  color: inherit;
}

.card--link h2 {
  margin: 0;
}

.card--positive {
  background-color: rgba(40, 167, 69, .2)
}
.card--positive h2 {
  color: var(--success);
}

.card--negative {
  background-color: rgba(220, 53, 69, .1);
}

.card--negative h2 {
  color: var(--fail);
}

.card--negative .styled-ul li:before {
  border-color: var(--fail);
}

.styled-ul li {
  padding-left: 2.2rem;
  position: relative;
  margin-bottom: .8rem;

  &:before {
    content: "";
    width: 1.3333rem;
    border-bottom: 2px solid var(--dark-turquoise);
    position: absolute;
    top: 1.2rem;
    left: 0;
  }
}

@media (min-width: 768px) {
  .card--square {
    aspect-ratio: 3/1;
  }
}