:root {
  /* Colors */
  --clr-red: hsl(0, 78%, 62%);
  --clr-cyan: hsl(180, 62%, 55%);
  --clr-orange: hsl(34, 97%, 64%);
  --clr-blue: hsl(212, 86%, 64%);
  --clr-grey-500: hsl(234, 12%, 34%);
  --clr-grey-400: hsl(212, 6%, 44%);
  --clr-white: hsl(0, 0%, 100%);
  --clr-off-white: hsl(0, 0%, 98%);

  /* Typograghy */
  --ff-primary: "Poppins", sans-serif;

    /* @link https://utopia.fyi/clamp/calculator/?a=320,1240 */
  --fs-22-40: clamp(1.375rem, 0.9837rem + 1.9565vw, 2.5rem);

  --fw-light: 200;
  --fw-regular: 400;
  --fw-bold: 600;
}

/* CSS reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

body {
  min-block-size: 100vh;
  line-height: 1.5;
}

img,
picture,
svg {
  display: block;
  max-inline-size: 100%;
}

/* General styling */
body {
  font-family: var(--ff-primary);
  font-size: .9375rem;
  font-weight: var(--fw-regular);
  color: var(--clr-grey-400);
  background-color: var(--clr-off-white);
}

/* Main content */
main {
  /* @link https://utopia.fyi/clamp/calculator?a=320,1240,48—96&p=size */
  --size-48-96: clamp(3rem, 1.9565rem + 5.2174vw, 6rem);
  margin-block: var(--size-48-96);
}

.wrapper {
  max-inline-size: 30rem;
  inline-size: 90%;
  margin-inline: auto;
}

@media(min-width: 40em) {
  .wrapper {
    max-inline-size: 69.875rem;
  }
}

.wrapper > :is(h1, p) {
  text-align: center;
}

h1 {
  font-size: var(--fs-22-40);
  font-weight: var(--fw-light);
  color: var(--clr-grey-500);
  line-height: 1.25;
  margin-block-end: 1.125rem;
}

h1 span {
  font-weight: var(--fw-bold);
}

h1 + p {
  color: var(--clr-grey-500);
  max-inline-size: 56ch;
  margin-inline: auto;
  margin-block-end: 3.75rem;
}

.cards-wrapper {
  display: grid;
  gap: 1.5rem;
}

@media(min-width: 40em) {
  .cards-wrapper {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  .supervisor {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }

  .team-builder {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
  }

  .karma {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
  }

  .calculator {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
  }
}

@media(min-width: 60em) {
  .cards-wrapper {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .supervisor {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }

  .team-builder {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  .karma {
    grid-column: 2 / 3;
    grid-row: 3 / 5;
  }

  .calculator {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
  }
}

.cards-wrapper section {
  background-color: var(--clr-white);
  padding: min(8%, 2rem);
  border-radius: 6px;
  border-top: 4px solid var(--clr-border-color);
  box-shadow: 1px 1px 6px 0px rgb(0 0 0 / 0.15);
}

.supervisor {
  --clr-border-color: var(--clr-cyan);
}

.team-builder {
  --clr-border-color: var(--clr-red);
}

.karma {
  --clr-border-color: var(--clr-orange);
}

.calculator {
  --clr-border-color: var(--clr-blue);
}

section h2 {
  font-size: 1.375rem;
  color: var(--clr-grey-500);
  font-weight: var(--fw-bold);
  margin-block-end: 1rem;
}

h2 + P {
  margin-block-end: 2rem;
}

section img {
  margin-inline-start: auto;
}