:root {
  --ff-Barlow: "Barlow Semi Condensed", sans-serif;

  --fw-normal: 400;
  --fw-semiBold: 500;
  --fw-bold: 600;

  --clr-purple-50: hsl(260, 100%, 95%);
  --clr-Purple-300: hsl(264, 82%, 80%);
  --clr-Purple-500: hsl(263, 55%, 52%);

  --clr-White: hsl(0, 0%, 100%);
  --clr-Black: hsl(0, 0%, 7%);

  --clr-Grey-100: hsl(214, 17%, 92%);
  --clr-Grey-200: hsl(0, 0%, 81%);
  --clr-Grey-400: hsl(224, 10%, 45%);
  --clr-Grey-500: hsl(217, 19%, 35%);
  --clr-Darkblue: hsl(219, 29%, 14%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--ff-Barlow);
}

img {
  display: block;
  width: 40px;
  border-radius: 50%;
}

h2 {
  font-size: 1.1rem;
  font-weight: var(--fw-semiBold);
}

h3 {
  font-size: 1.3rem;
  font-weight: var(--fw-bold);
}

span {
  font-size: 0.875rem;
  letter-spacing: -0.5px;
}

.wrapper {
  display: grid;
  gap: 2rem;

  padding-inline: 2.5rem;
  padding-block: 4.5rem;

  max-width: 1305px;
  margin-inline: auto;
}

.card {
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 5px 1px var(--clr-Grey-200);

  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  .profile {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  p {
    line-height: 1.3;
  }
}

.card:nth-of-type(1) {
  background-color: var(--clr-Purple-500);
  color: var(--clr-purple-50);

  span,
  p {
    color: var(--clr-Purple-300);
  }

  grid-area: D;
}
.card:nth-of-type(2) {
  background-color: var(--clr-Grey-500);
  color: var(--clr-Grey-100);

  p,
  span {
    color: var(--clr-Grey-200);
  }

  grid-area: J;
}
.card:nth-of-type(3) {
  background-color: var(--clr-White);
  color: var(--clr-Grey-500);

  p,
  span {
    color: var(--clr-Grey-400);
  }

  grid-area: Je;
}
.card:nth-of-type(4) {
  background-color: var(--clr-Black);
  color: var(--clr-Grey-100);

  grid-area: P;
}
.card:nth-of-type(5) {
  background-color: var(--clr-White);
  color: var(--clr-Grey-500);
  p,
  span {
    color: var(--clr-Grey-400);
  }

  grid-area: K;
}

.wrapper {
  grid-template-areas:
    "D"
    "J"
    "Je"
    "P"
    "K";

  @media (width > 1120px) {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    grid-template-areas:
      "D D J K"
      "Je P P K";
  }
}

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