:root {
  --font-size: 13px;
  --purple50: hsl(260, 100%, 95%);
  --purple300: hsl(264, 82%, 80%);
  --purple500: hsl(263, 55%, 52%);
  --white: hsl(0, 0%, 100%);
  --grey100: hsl(214, 17%, 92%);
  --grey200: hsl(0, 0%, 81%);
  --grey400: hsl(224, 10%, 45%);
  --grey500: hsl(217, 19%, 35%);
  --darkblue: hsl(219, 29%, 14%);
  --black: hsl(0, 0%, 7%);
  --blue: hsl(228, 45%, 44%);
  --medium: 500;
  --heavy: 600;
}

html {
  font-family: Barlow Semi Condensed, sans-serif;
  font-size: var(--font-size);
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: var(--grey100);
}

.container {
  display: flex;
  flex-direction: column;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 2.5em;
  margin: 2.5em;
  border-radius: 10px;
}

.card .name-header img {
  border-radius: 50%;
  max-width: 10vw;
  min-width: 10vw;
}

.card .name-header {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.card .name-header .name-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 5%;
  color: var(--white);
}

.card .name-header .name-container .status {
  color: var(--grey100);
}

.card p {
  color: white;
}

.card .summary {
  font-size: 1.5em;
  font-weight: var(--medium);
}

.card .quote {
  color: var(--grey100);
}

.--daniel {
  background-color: var(--purple500);
}

.--jonathan {
  background-color: var(--grey500);
}

.--jeanette,
.--kira {
  background-color: white;
}

.--jeanette .name-header .name-container .name,
.--jeanette .summary,
.--kira .name-header .name-container .name,
.--kira .summary {
  color: var(--darkblue);
}

.--jeanette .name-header .name-container .status,
.--jeanette .quote,
.--kira .name-header .name-container .status,
.--kira .quote {
  color: var(--grey500);
}

.--patrick {
  background-color: var(--darkblue);
}

.--patrick .name-header img {
  border-color: var(--purple500);
}

.attribution {
  text-align: center;
}
.attribution a {
  color: var(--blue);
}

@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template: repeat(2, 1fr) / repeat(4, 1fr);
    gap: 2em;
    width: 80vw;
  }

  .card {
    margin: 0em;
    padding: 1em;
    box-shadow: 0 0.5em 1em -2px var(--grey500);
  }

  .card .name-header,
  .card p {
    margin: 0.2em;
  }

  .card .name-header img {
    border-radius: 50%;
    max-width: 3vw;
    min-width: 3vw;
  }

  .card .summary {
    font-size: 2em;
  }

  .card .quote {
    font-size: 1.2em;
    line-height: 1.5em;
  }

  .--daniel {
    grid-area: 1 / 1 / 2 / 3;
  }

  .--jonathan {
    grid-area: 1 / 3 / 2 / 4;
  }

  .--kira {
    grid-area: 1 / 4 / 3 / 5;
  }

  .--jeanette {
    grid-area: 2 / 1 / 3 / 2;
  }

  .--patrick {
    grid-area: 2 / 2 / 3 / 4;
  }
}