.hero-box-section {
  width:100%;
  max-width:1200px;
  text-align:center;
  margin:auto;
  /*border:1px solid white;*/
}

.hero-box-div {
  width:19%;
  max-width:300px;
  /*min-width:280px;*/
  margin:10px;
  display:inline-block;
  height:200px;
  border:3px solid var(--clr);
  border-radius:10px;
  color:var(--clr);
  vertical-align:top;
  padding:20px;
  transform:scale(.8);
}

@media (max-width: 1000px) {
  .hero-box-div {
    width:45%;
  }
}

@media (max-width: 450px) {
  .hero-box-div {
    width:90%;
  }
}

.hero-box-div-content h1 {
  font-size:26px;
  margin-top:20px;
}

.hero-box-div-content h1 {
  font-size:26px;
  margin-top:20px;
}