html {
  box-sizing: border-box;
}

body,
h1,
h2,
p {
  margin: 0;
}

body {
  margin: 3em 2em;
  display: grid;
  place-content: center;
  height: 100%;
}

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

.grid {
  display: grid;
  height: 100%;
  width: 100%;
  gap: 1.2em;
  font-family: Poppins, sans-serif;
  place-content: center;
}

.head_card {
  text-align: center;
}

.head_card h1 {
  font-weight: 200;
  font-size: 1.4em;
  color: hsl(212, 6%, 44%);
}

.head_card span {
  font-weight: 600;
  color: hsl(234, 12%, 34%);
}

.head_card p {
  font-size: 0.96em;
  color: hsl(212, 6%, 44%);
  font-weight: 400;
  padding: 1em 0;
}

.content_card {
  box-shadow: 0.01em 0.5em 1em 0.004em hsl(212, 6%, 80%);
  border-radius: 0.3em;
  padding: 2em 2em;
  align-self: center;
}

.content_card h2 {
  font-size: 0.99em;
  color: hsl(234, 12%, 34%);
  font-weight: 600;
}

.content_card p {
  font-size: 0.82em;
  color: hsl(212, 6%, 44%);
}

.content_card img {
  float: right;
  max-width: 3em;
  max-height: 3em;
  padding-top: 2em;
}

.border_cyan {
  border-top: 0.25em solid hsl(180, 62%, 55%);
}
.border_red {
  border-top: 0.25em solid hsl(0, 78%, 62%);
}
.border_yellow {
  border-top: 0.25em solid hsl(34, 97%, 64%);
}
.border_blue {
  border-top: 0.25em solid hsl(212, 86%, 64%);
}

@media (min-width: 40em) {
  .head_card {
    max-width: 30em;
    justify-self: center;
    padding: 2em 0;
  }
  .head_card h1 {
    font-size: 1.8em;
  }
  .grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 60em;
    gap: 2em;
  }
  .head_card {
    grid-column: span 3;
  }
  .border_cyan {
    grid-row: span 2;
  }
  .border_yellow {
    grid-column-start: 2;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .border_blue {
    grid-column-start: 3;
    grid-row: span 2;
  }
}