@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.hero,
.hero--dark {
  position: relative;
  min-height: 315px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.hero--custom {
  position: relative;
}

.hero--custom .container {
  max-width: 1140px;
}

.hero--custom img {
  width: 100%;
  max-height: 530px;
  object-fit: scale-down;
}

.hero--custom img.wave {
  width: 100%;
  position: absolute;
  bottom: -1px;
  left: 0;
}

@media screen and (min-width: 768px) {
  .hero,
  .hero--dark {
    min-height: 416px;
  }
}
.hero img,
.hero--dark img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.hero--dark img {
  -webkit-filter: brightness(70%);
  filter: brightness(70%);
}

.hero .container,
.hero--dark .container {
  margin: auto;
  position: relative;
}