/* ==================== */
/* # General Settings # */
/* ==================== */

:root {
  --bg-color-body: hsl(300, 11%, 98%);
  --bg-color-card: hsl(0, 0%, 100%);

  --color-heading: hsl(234, 12%, 34%);
  --color-text: hsl(210, 6%, 44%);

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

body {
  /* Box model */
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-inline: 2em;

  /* Typography */
  font-family: "Poppins", sans-serif;
  line-height: 1.5;

  /* Visual */
  background-color: var(--bg-color-body);
  color: var(--color-text);
}

/* ================ */
/* # Simple Reset # */
/* ================ */

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

img {
  /* Box model */
  display: block;
  max-width: 100%;
}

/* ==================== */
/* # Header Component # */
/* ==================== */

.header {
  /* Box model */
  max-width: 60ch;
  margin-block: 4em;

  /* Typography */
  text-align: center;
}

.header__title {
  /* Box model */
  margin-block-end: 0.5em;

  /* Typography */
  font-size: clamp(1.6rem, 1.248rem + 1.502vw, 2.6rem);
  font-weight: 200;
}

/* ================== */
/* # Card Component # */
/* ================== */

.card {
  /* Box model */
  margin-block-end: 2em;
  max-width: 25em;
  padding: 2em;

  /* Visual */
  background-color: var(--bg-color-card);
  border-block-start: 0.3125em solid var(--border-color, #000);
  border-radius: 0.3125em;
  box-shadow: 0 0.3125em 0.625em;
}

.card--supervisor {
  /* Visual */
  --border-color: var(--color-primary-cyan);
}

.card--team-builder {
  /* Visual */
  --border-color: var(--color-primary-red);
}

.card--karma {
  /* Visual */
  --border-color: var(--color-primary-orange);
}

.card--calculator {
  /* Visual */
  --border-color: var(--color-primary-blue);
}

.card__text {
  /* Box model */
  margin-block-start: 0.5em;
  margin-block-end: 2em;
}

.card__icon {
  /* Box model */
  margin-inline-start: auto;
}

/* ================== */
/* # Similar Styles # */
/* ================== */

.header__title,
.card__title {
  /* Typography */
  line-height: 1.3;

  /* Visual */
  color: var(--color-heading);
}

.header__title--bold,
.card__title {
  /* Typography */
  font-weight: 600;
}

.header__description,
.card__text {
  font-size: 0.9375rem;
}

/* ================= */
/* # Media Queries # */
/* ================= */

@media (min-width: 48em) {
  .cards {
    /* Box model */
    column-gap: 2em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .cards {
    /* Box model */
    grid-template-areas: "start first-center end" "start second-center end";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .card--supervisor {
    /* Positioning */
    align-self: center;
    grid-area: start;
  }

  .card--team-builder {
    /* Positioning */
    grid-area: first-center;
  }
  .card--karma {
    /* Positioning */
    grid-area: second-center;
  }
  .card--calculator {
    /* Positioning */
    align-self: center;
    grid-area: end;
  }
}