.cards {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card img {
  width: 100%;
}

.card__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 25px;
}

.card__inner i.fa-chevron-down {
  color: white;
  margin: 10px 0;
}

h3.card__title {
  font-size: 24px;
  font-weight: normal;
  text-align: center;
  color: #000;
  margin-top: 20px;
  margin-bottom: 15px;
}

.card__bullet-points ul li::before {
  margin-right: 25px;
}

.card__bullet-points ul li.green-checkmark::before {
  content: "\f058";
}

.card__bullet-points ul li.red-x::before {
  content: "\f057";
  color: #E43B2C;
}

.card__content {
  text-align: center;
}

.card__content p {
  color: rgb(133, 136, 161);
  margin-bottom: 0;
}

.card__link {
  margin: 20px 0;
}

.card__link a {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: rgb(151, 184, 116);
  border-bottom: 2px solid transparent;
}

.card__link a:hover {
  border-bottom: 2px solid rgb(151, 184, 116);
}

.card__link a i {
  margin-left: 10px;
}

{# ========== Modifier Classes ========= #}

.card--grey-blue-bg {
  background-color: #EFF3F8;
}

.card--white-bg {
  background-color: white;
}

.card--light-black-bg {
  background-color: #4D6070;
}

.card--transparent-bg {
  background-color: transparent;
}

.card--dashed-border {
  border: 2px dashed #4D6070;
}

.card--border-radius-10 {
  border-radius: 10px;
}

.card--drop-shadow {
  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

h3.card__title--green-strip {
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: white;
  background-color: #97B874;
  padding: 25px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-top: 0;
}

{# ========== END Modifier Classes ========= #}