:root {
  --grey-500: hsl(234, 12%, 34%);
  --grey-400: hsl(212, 6%, 44%);
  --white: white;
  --red: hsl(0, 78%, 62%);
  --cyan: hsl(180, 62%, 55%);
  --blue: hsl(212, 86%, 64%);
  --orange: hsl(34, 97%, 64%);
  --shadow: hsla(212, 43%, 67%, 0.5);
  --font-size-36: 2.25rem;
  --font-size-24: 1.5rem;
  --font-size-20: 1.25rem;
  --font-size-15: 0.9375rem;
  --font-size-13: 0.8125rem;
  --font-weight-semibold: 600;
  --font-weight-xlight: 200;
  --spacing-40: 2.5rem;
  --spacing-32: 2rem;
  --spacing-24: 1.5rem;
  --spacing-16: 1rem;
  --spacing-8: 0.5rem;
  --line-height-160: 160%;
  --line-height-140: 140%;
  --line-height-135: 135%;
  --card-height: 15.625rem;
  --card-width-mobile-tablet: 19.625rem;
  --card-width-desktop: 21.875rem;
  --title-wrapper-width: 33.75rem;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li {
  margin: 0;
}

body {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 3.5rem 1.84rem 0 1.84rem;
  color: var(--grey-500);
}

.title-wrapper {
  text-align: center;
  max-width: var(--title-wrapper-width);
  margin-bottom: 3.75rem;
}

.title-wrapper p:first-of-type {
  margin-bottom: 0;
  font-weight: var(--font-weight-xlight);
}

.title-wrapper h1 {
  margin-top: 0;
  font-weight: var(--font-weight-semibold);
}

.title-wrapper p:first-of-type,
.title-wrapper h1 {
  font-size: var(--font-size-24);
}

.title-wrapper p:last-of-type {
  margin-top: var(--spacing-16);
  font-size: var(--font-size-15);
}

.card::before {
  content: "";
  width: 100%;
  height: 0.25rem;
  position: absolute;
  top: 0;
  left: 0;
}

.card--supervisor::before {
  background-color: var(--cyan);
}

.card--team-builder::before {
  background-color: var(--red);
}

.card--karma::before {
  background-color: var(--orange);
}

.card--calculator::before {
  background-color: var(--blue);
}

.card-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

.card {
  display: flex;
  flex-direction: column;
  height: var(--card-height);
  padding: var(--spacing-32);
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1rem 2rem -0.6875rem var(--shadow);
  max-width: var(--card-width-mobile-tablet);
}

.card h2 {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-20);
  line-height: var(--line-height-135);
  margin-bottom: 0.375rem;
  margin-top: 0;
}

.card p {
  font-size: var(--font-size-13);
  margin-bottom: 2rem;
  color: var(--grey-400);
}

.icon {
  width: 4rem;
  align-self: flex-end;
}

.credits {
  margin-top: 2rem;
  font-size: 0.65rem;
  text-align: center;
}

.credits a {
  color: var(--grey-500);
  text-decoration: none;
}

.credits a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.credits a:visited {
  color: var(--orange);
}

/* Thanks to Dave Cross and Kevin Powell for their videos on grid-areas.
I had forgotten about grid-areas and how to use that kind of CSS Grid structure. */

@media screen and (min-width: 768px) {
  .title-wrapper {
    margin-bottom: 4.625rem;
  }

  .title-wrapper p:first-of-type,
  .title-wrapper h1 {
    font-size: var(--font-size-36);
  }

  .card-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      ". a a ."
      "b b c c"
      ". d d .";
  }

  .card--team-builder {
    grid-area: a;
  }

  .card--supervisor {
    grid-area: b;
  }

  .card--karma {
    grid-area: c;
  }

  .card--calculator {
    grid-area: d;
  }
}

@media screen and (min-width: 1110px) {
  .card-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      ". a ."
      "b a c"
      "b d c"
      ". d .";
    gap: var(--spacing-32);
  }

  .card {
    max-width: var(--card-width-desktop);
  }

  .card--team-builder {
    grid-area: a;
  }

  .card--supervisor {
    grid-area: b;
  }

  .card--calculator {
    grid-area: c;
  }

  .card--karma {
    grid-area: d;
  }
}