.hero-component {
  position: relative;
  width: 100%;
  min-width: 100%;
  overflow: hidden;
  margin: 0;
  z-index: 0;
  height: 300px;
}
.hero-component .block__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
.hero-component .block__image div,
.hero-component .block__image article {
  height: 100%;
}

.hero-component .block__image img {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  font-family: "object-fit: cover; object-position: center";
  max-width: 100%;
  height: auto;
}

.hero-component .block__title {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.hero-component .block__title h1 {
  color: var(--ff-color-white);
  z-index: 10;
  position: relative;
  margin: 0 40px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (min-width: 768px) {

}

@media (min-width: 1200px) {

}