/* styling for the row of features on the homepage */
/* uses min-widths 768 and 992 in media queries */

#features {
  margin: 0 auto 60px;
  text-align: center;
}
@media (max-width: 767px) {
    #features {
    margin: 0 auto 24px;
  }
}

.feature-block {
  display: inline-block;
  margin: 24px auto 0;
  width: 85%;
}
@media (min-width: 768px) {
    .feature-block {
    margin: 0 auto;
    padding: 0 1em;
  }
}
@media (min-width: 992px) {
    .feature-block {
    padding: 0 1.5em;
  }
}

.feature-block img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 4px 4px rgba(35, 50, 57, 0.5);
}

.feature-block:hover img {
  border: var(--hct-pale-border-thin);
  box-shadow: none;
}

@media (min-width: 768px) {
    .feature-block.feature-count-3 {
    width: 33.33%;
  }
}

@media (min-width: 768px) {
    .feature-block.feature-count-4 {
    width: 25%;
  }
}

@media (min-width: 768px) {
    .feature-block.feature-count-5 {
    width: 20%;
  }
}