.hero {
  overflow: hidden;
  position: relative;
  padding-top: 8em;
  padding-bottom: 1em;
}

.hero figure {
  position: absolute;
  margin:0;
  padding: 0;
  width: 100%;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  min-height: 100%;
  object-fit: cover;
}

.hero figure::before {
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /*background-image: linear-gradient(135deg, #000000 25%, #ffffff 25%, #ffffff 50%, #000000 50%, #000000 75%, #ffffff 75%, #ffffff 100%);
  background-size: 2.83px 2.83px;
  opacity: 0.1;*/
  z-index: 1;
}

.hero figure img {
  width: 100%;
  object-fit: cover;
  height: 100vh;
}

.hero h1,
.hero h2,
.hero .subtitle {
  padding-left: 0.5em;
  padding-right: 0.5em;
  color: white;
  /*text-shadow: 0 0 30px rgb(0 0 0 / 70%);*/
  /*text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989992px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756802px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279415px 0px;*/
  /*text-shadow:0px 1px 0 rgb(0,0,0),0px -1px 0 rgb(0,0,0),1px 0px 0 rgb(0,0,0),-1px 0px 0 rgb(0,0,0),1px 1px 0 rgb(0,0,0),1px -1px 0 rgb(0,0,0),-1px 1px 0 rgb(0,0,0),-1px -1px 0 rgb(0,0,0),2px 2px 1px rgba(0,0,0,0.5);
  -webkit-text-shadow:0px 1px 0 rgb(0,0,0),0px -1px 0 rgb(0,0,0),1px 0px 0 rgb(0,0,0),-1px 0px 0 rgb(0,0,0),1px 1px 0 rgb(0,0,0),1px -1px 0 rgb(0,0,0),-1px 1px 0 rgb(0,0,0),-1px -1px 0 rgb(0,0,0),2px 2px 1px rgba(0,0,0,0.5);
  -moz-text-shadow:0px 1px 0 rgb(0,0,0),0px -1px 0 rgb(0,0,0),1px 0px 0 rgb(0,0,0),-1px 0px 0 rgb(0,0,0),1px 1px 0 rgb(0,0,0),1px -1px 0 rgb(0,0,0),-1px 1px 0 rgb(0,0,0),-1px -1px 0 rgb(0,0,0),2px 2px 1px rgba(0,0,0,0.5);*/
}

.subtitle {
  text-align: center;
  color:var(--colorPrimary);
}

@media screen and (min-width:1024px) {
  .hero figure img {
    height: auto;
  }
}