:root{
  /* Colors (style guide) */
  --very-dark-blue: hsl(234, 12%, 34%);
  --grayish-blue: hsl(229, 6%, 66%);
  --very-light-gray: hsl(0, 0%, 98%);

  --red: hsl(0, 78%, 62%);
  --cyan: hsl(180, 62%, 55%);
  --orange: hsl(34, 97%, 64%);
  --blue: hsl(212, 86%, 64%);

  --radius: 0.5rem;
  --shadow: 0 10px 20px rgba(0,0,0,.08);
}

body{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--very-light-gray);
  color: var(--very-dark-blue);
}

.hero{
  max-width: 34rem;
}

.hero__title{
  letter-spacing: 0.2px;
}

.hero__subtitle{
  color: var(--grayish-blue);
}

.feature-card{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 4px solid transparent;
  padding: 1.75rem 1.75rem 1.5rem;
}

.feature-card__text{
  color: var(--grayish-blue);
  font-size: 0.9rem;
  line-height: 1.6;
}

.feature-card__icon{
  display: flex;
  justify-content: flex-end;
  margin-top: 2.25rem;
}

.feature-card__icon img{
  width: 56px;
  height: 56px;
}

.feature-card--red{ border-top-color: var(--red); }
.feature-card--cyan{ border-top-color: var(--cyan); }
.feature-card--orange{ border-top-color: var(--orange); }
.feature-card--blue{ border-top-color: var(--blue); }