* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Colors */

  --grey-500: #4d4f62;
  --grey-400: #6a7178;
  --white: #ffffff;
  --red: #ea5454;
  --cyan: #44d3d2;
  --blue: #549ef2;
  --orange: #fcae4a;

  /* Spacing */
  --500-40px: 2.5rem;
  --400-32px: 2rem;
  --300-24px: 1.5rem;
  --200-16px: 1rem;
  --100-8px: 0.5rem;

  /* Typography*/

  .text-preset-1 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.25rem; /*36px*/
    line-height: 140%;
    letter-spacing: 0.25px;
  }

  .text-preset-2 {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 2.25rem; /*36px*/
    line-height: 140%;
    letter-spacing: 0.25px;
  }

  .text-preset-3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.25rem; /*20px*/
    line-height: 135%;
    letter-spacing: 0px;
  }

  .text-preset-4 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.06rem; /*15px*/
    line-height: 140%;
    letter-spacing: 0px;
  }

  .text-preset-5 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.81rem; /*13px*/
    line-height: 160%;
    letter-spacing: 0px;
  }
}

body {
  margin: var(--400-32px);
  max-width: 1100px;
  justify-self: center;
  background: #fafafa;
}

.page-title {
  justify-self: center;
  justify-items: center;
  align-items: center;
  margin-bottom: 74px;
  color: var(--grey-500);
}

.cards-container {
  display: grid;
  gap: var(--400-32px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    "supervisor team-builder calculator"
    "supervisor karma calculator";
}

.card-supervisor {
  grid-area: supervisor;
  align-self: center;
  position: relative;
  width: 350px;
  height: 250px;
  padding: var(--400-32px);
  border-top: solid var(--cyan);
  border-radius: 8px;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}

.card-team-builder {
  grid-area: team-builder;
  position: relative;
  width: 350px;
  height: 250px;
  padding: var(--400-32px);
  border-top: solid var(--red);
  border-radius: 8px;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}

.card-karma {
  grid-area: karma;
  position: relative;
  width: 350px;
  height: 250px;
  padding: var(--400-32px);
  border-top: solid var(--orange);
  border-radius: 8px;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}

.card-calculator {
  grid-area: calculator;
  align-self: center;
  position: relative;
  width: 350px;
  height: 250px;
  padding: var(--400-32px);
  border-top: solid var(--blue);
  border-radius: 8px;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}

.card-title {
  color: var(--grey-500);
  margin-bottom: var(--100-8px);
}

.card-text {
  color: var(--grey-400);
  margin-bottom: var(--400-32px);
}

.card-image {
  position: absolute;
  bottom: var(--500-40px);
  right: var(--400-32px);
}

@media (min-width: 800px) and (max-width: 1200px) {
  body {
    margin: var(--200-16px);
  }

  .cards-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "supervisor ."
      "team-builder karma"
      "calculator .";
  }
}

@media (max-width: 799px) {
  body {
    margin: var(--200-16px);
  }

  .cards-container {
    justify-items: center;
    grid-template-columns: 100%;
    grid-template-areas:
      "supervisor"
      "team-builder"
      "karma"
      "calculator";
  }
}