:root {
  --primary-red: hsl(0, 78%, 62%);
  --primary-cyan: hsl(180, 62%, 55%);
  --primary-orange: hsl(34, 97%, 64%);
  --primary-blue: hsl(212, 86%, 64%);
  --neu-vdblue: hsl(234, 12%, 34%);
  --neu-grayishblue: hsl(229, 6%, 66%);
  --neu-vlgray: hsl(0, 0%, 98%);
}

* {
  margin: 0;
  padding: 0;
}
body {
  background: var(--neu-vlgray);
  font-family: "Poppins", sans-serif;
  color: var(--neu-vdblue);
  font-size: 15px;
}

/* Custom page styles */
.container {
  margin: 5rem 13.5rem;
  text-align: center;
}

/* Heading */
.heading {
  margin: 3rem 5rem;
}
.heading .h-light {
  font-weight: 200;
}
.heading .h-bold {
  font-weight: 600;
}
.heading p {
  padding: 1rem 10.5rem;
  color: var(--neu-grayishblue);
}

/* Card Styles */
.card {
  background: #fff;
  border-radius: 1%;
  width: 325px;
  height: 225px;
  text-align: left;
  position: relative;
  margin-top: 2rem;
  box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.2);
}
.card-heading {
  margin: 1.5rem;
}
.card-heading h3 {
  font-size: 1.15rem;
}
.card-heading p {
  color: var(--neu-grayishblue);
  margin-top: 1rem;
  font-size: 0.85rem;
}
.card img {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 1.5rem 1.5rem 0;
}

/* Different Card Border Colors */
.card-blue {
  border-top: 3px solid var(--primary-blue);
}
.card-red {
  border-top: 3px solid var(--primary-red);
}
.card-cyan {
  border-top: 3px solid var(--primary-cyan);
}
.card-orange {
  border-top: 3px solid var(--primary-orange);
}

/* Grid Layout */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.5rem;
  align-items: center;
  justify-items: center;
}

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

/* Media Queries */
@media (max-width: 375px) {
  .container {
    margin: 0 1rem;
  }
  .heading {
    margin: 7rem 1rem 3rem;
  }
  .h-bold,
  .h-light {
    font-size: 1.25rem;
  }
  .heading p {
    padding: 0;
    margin-top: 1rem;
  }
  .grid-container {
    grid-template-columns: 1fr;
  }
  .card {
    margin-top: 0;
  }
  .card-orange {
    margin-top: 1rem;
  }
  .attribution {
    padding: 3rem 0;
  }
}