@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  /* ## Colors */

  /* ### Primary */

  --red   : hsl(0, 78%, 62%);
  --cyan  : hsl(180, 62%, 55%);
  --orange: hsl(34, 97%, 64%);
  --blue  : hsl(212, 86%, 64%);

  /* ### Neutral */

  --grey-500: hsl(234, 12%, 34%);
  --grey-400: hsl(212, 6%, 44%);
  --white   : hsl(0, 0%, 100%);
}

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

html {
  font-size      : 62.5%;
  overflow-x     : hidden;
  scroll-behavior: smooth;
}

body {
  font-size       : 1.5rem;
  font-family     : "Poppins", sans-serif;
  background-color: #fafafa;
}

main {
  width          : 100%;
  min-height     : 100vh;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
}

header {
  max-width : 50rem;
  text-align: center;
  margin-top: 6.6rem;
}

h1 {
  color        : var(--grey-500);
  font-size    : 3.5rem;
  font-weight  : 600;
  line-height  : 1.4;
  margin-bottom: 1.6rem;
}

span {
  font-weight: 200;
}

.cards-container {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows   : repeat(4, 1fr);
  gap                  : 3rem;
  margin               : 6.6rem;
}

.card {
  background-color: var(--white);
  display         : flex;
  flex-direction  : column;
  align-items     : flex-start;
  max-width       : 36rem;
  padding         : 26px 32px 32px;
  border-top      : 4px solid black;
  border-radius   : 6px;
  box-shadow      : 0 12px 18px #4a73a533;
}

.supervisor-card {
  border-color: var(--cyan);
  grid-row    : 2/span 2;
}

.team-builder-card {
  border-color: var(--red);
  grid-column : 2;
  grid-row    : 1 / span 2;
}

.karma-card {
  border-color: var(--orange);
  grid-column : 2;
  grid-row    : 3 / span 2;
}

.calculator-card {
  border-color: var(--blue);
  grid-column : 3;
  grid-row    : 2 / span 2;
}

h2 {
  font-size  : 2rem;
  font-weight: 500;
  color      : var(--grey-500);
}

.card-text {
  font-size: 1.3rem;
  color    : var(--grey-400);
}

img {
  margin-top: 4rem;
  align-self: flex-end;
}

@media (max-width: 1056px) {
  .cards-container {
    display       : flex;
    flex-direction: column;
  }
}