.box-container {
  width: 100%;
  height: fit-content;
  padding: 10px;
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
}.box-container.gapless{
  gap: 0;
}

.box-container.b-2>.box {
  width: calc(100% / 2 - 10px);
}

.box-container.b-3>.box {
  width: calc(100% / 3 - 10px);
}

.box-container.b-4>.box {
  width: calc(100% / 4 - 10px);
}

.box-container>.box {
  /* background-color: white; */
  padding: 20px 10px;
}.box-container.shadowed-children > .box{
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.box-container.white .box {
  background-color: white;
}

.box.type-1 {
  border-bottom: 3px solid orangered;
  padding: 50px 10px;
  padding-top: 30px;
}

.box.type-1:hover {
  background-color: orangered;
  border-bottom: 3px solid white;
}

.box.type-1:hover * {
  color: white;
}


.box-container.shadowed-children .box {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.box.img img{
        width: 100%;
        object-fit: cover;
    }



/*     =======================    HEROES    =================    */
.hero-box-container * {
    color: #383838;
  }

  .hero-images img {
      min-height: 250px;
      max-height: 300px;
      width: 100%;
      object-fit: cover;
      object-position: left;
    }

    .hero-1 {
      width: 50%;
      border: 10px solid whitesmoke
    }

    .hero-2 {
      width: 70%;
      margin-left: 50px;
      float: right;
      transform: translateY(-20px);
      margin-top: -100px;
      border: 10px solid whitesmoke;
    }

    .hero-images img {
      min-height: 250px;
      max-height: 300px;
      width: 100%;
      object-fit: cover;
      object-position: left;
    }

    .box.img {
        background-size:cover;
        background-repeat:no-repeat;
    }

    




@media only screen and (max-width:721px) {
  .b-2 .box {
    width: 100% !important;
  }

  .b-3 .box {
    width: calc(100% / 2 - 10px) !important;
  }
  .b-4 .box {
    width: calc(100% / 3 - 10px) !important;
  }
}

.box-container img.main {
  width: 100%;
  object-fit: cover;
}


@media only screen and (max-width:921px) and (min-width:721px) {
  .box {
    width: calc(100% / 2 - 10px) !important;
  }

}

@media only screen and (max-width:600px){
   .box-container .box{
      width: 100%!important;
   }
}