:root {
  /* Primary */
  --red: hsl(0, 78%, 62%);
  --cyan: hsl(180, 62%, 55%);
  --orangen: hsl(34, 97%, 64%);
  --blue: hsl(212, 86%, 64%);
  /* Neutral */
  --very-dark-blue: hsla(234, 12%, 34%);
  --grayish-blue: hsl(229, 6%, 66%);
  --very-light-blue: hsl(0, 0%, 98%);

  /* Fonts */
  --poppins-font: 'Poppins', sans-serif;
  --wght-200: 200;
  --wght-400: 400;
  --wght-700: 700;
}

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

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
  min-height: 100dvh;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  font-family: var(--poppins-font);
  background: var(--very-light-blue);
  font-size: 1.5rem;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 112rem;
}

.heading {
  text-align: center;
  max-width: 57rem;
  margin: 5rem auto;
}

.heading span,
.heading h1 {
  font-size: 3.5rem;
  color: var(--very-dark-blue);
}

.heading h1,
.card h2 {
  font-weight: var(--wght-700);
}

.heading span {
  font-weight: var(--wght-200);
}

.heading p {
  font-size: 1.6rem;
  font-weight: var(--wght-200);
  color: var(--grayish-blue);
}

.cards {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin-inline: 3rem;
}

.card {
  margin-bottom: 3rem;
  border-radius: 1rem;

  padding: 3rem;
  box-shadow: 0px 15px 30px -11px rgba(131, 166, 210, 0.5);
}

.card.supervisor {
  border-top: 0.5rem solid var(--cyan);
}

.card.team {
  border-top: 0.5rem solid var(--red);
}

.card.karma {
  border-top: 0.5rem solid var(--orangen);
}

.card.calculator {
  border-top: 0.5rem solid var(--blue);
}

.cards .col {
  flex: 1;
}

.card .text {
  margin-bottom: 8rem;
}

.card h2 {
  font-size: 2rem;
}

.card img {
  margin-left: auto;
}

@media (width >= 50rem) {
  .cards {
    display: flex;
  }

  .cards .col:nth-of-type(2) > .card {
    margin-bottom: 3rem;
  }
}