@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");

:root {
  --grey-500: #4d4f62;
  --grey-400: #6a7178;
  --white: #fff;
  --red: #ea5454;
  --cyan: #44d3d2;
  --blue: #549ef2;
  --orange: #fcae4a;
  --bg-color: #fafafa;

  --font-family: "Poppins", sans-serif;
  --font-size-title: clamp(2.4rem, 1.147vw + 2.033rem, 3.6rem);
  --font-title-bold: 600 var(--font-size-title) / 1.4 var(--font-family); /* text preset 1, .25rem letter spacing*/
  --font-title-light: 200 var(--font-size-title) / 1.4 var(--font-family); /* text preset 2, .25rem letter spacing*/
  --font-subtitle: 600 2rem/1.35 var(--font-family); /* text preset 3, 0rem letter spacing*/
  --font-body: 400 1.5rem/1.4 var(--font-family); /* text preset 4, 0rem letter spacing*/
  --font-caption: 400 1.3rem/1.6 var(--font-family); /* text preset 5, 0rem letter spacing*/
  --letter-s-zero: 0;
  --letter-s-wider: 0.025rem;

  --space-100: 0.8rem;
  --space-200: calc(var(--space-100) * 2);
  --space-400: calc(var(--space-100) * 4);
  --space-500: calc(var(--space-100) * 5);
}

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

.sr-only {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  padding: 0;
  margin: -0.1rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

html {
  font-size: 62.5%;
}

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

body {
  background: var(--bg-color);
  color: var(--grey-500);
}

main {
  display: flex;
  flex-flow: column nowrap;
  gap: calc(var(--space-500) * 1.5);
  padding: var(--space-500) var(--space-400);
  align-items: center;
}

.title-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--space-200);
  text-align: center;
  max-width: 32rem;
}

.title {
  font: var(--font-title-bold);
  letter-spacing: var(--letter-s-wider);
}

.title--light {
  display: block;
  font: var(--font-title-light);
}

.subtitle {
  font: var(--font-body);
  letter-spacing: var(--letter-s-zero);
}

.supervisor {
  grid-area: supervisor;
}

.team {
  grid-area: team;
}

.karma {
  grid-area: karma;
}

.calculator {
  grid-area: calculator;
}

.cards-wrapper {
  display: grid;
  gap: var(--space-400);
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: "supervisor" "team" "karma" "calculator";
  justify-content: center;
}
.card {
  display: flex;
  flex-flow: column nowrap;
  max-width: 32rem;
  min-width: 28rem;
  min-height: 25rem;
  background-color: var(--white);
  box-shadow: 0 1.5rem 3rem -1.1rem rgba(131,166,210,0.5);
  border-radius: var(--space-100);
}

.card-spacer {
  width: 100%;
  height: 0.4rem;
  background-color: transparent;
  border-radius: var(--space-100) var(--space-100) 0 0;
}

.cyan {
  background-color: var(--cyan);
}

.red {
  background-color: var(--red);
}

.orange {
  background-color: var(--orange);
}

.blue {
  background-color: var(--blue);
}

.card-content {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--space-400);
  padding: var(--space-400);
}

.card-title-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.6rem;
}

.card-title {
  font: var(--font-subtitle);
}

.card-caption {
  font: var(--font-caption);
  color: var(--grey-400);
}

.card-img-wrapper {
  align-self: flex-end;
}

.attribution {
  font-size: 1.1rem;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}

@media screen and (min-width: 23.5rem) {
  .title-wrapper {
    max-width: 55rem;
  }
}

@media screen and (min-width: 41rem) {
  main {
    gap: calc(var(--space-100) * 9);
  }

  .supervisor,
  .calculator {
    justify-self: center;
  }

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

@media screen and (min-width: 64rem) {
  main {
    gap: calc(var(--space-100) * 9);
    height: 100vh;
    place-content: center;
  }

  .supervisor,
  .calculator {
    align-self: center;
  }

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

  .card {
    max-width: 35rem;
  }
}