/*
** .hero-header
*/

.hero-header {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 5em;
}

.hero-header__inner {
  width: 100%;
  height: 100%;
  min-height: 30em;
  padding: 3em 1em;
}

.hero-header__inner[data-textposition="tl"],
.hero-header__inner[data-textposition="tr"] {
  align-content: baseline;
}

.hero-header__inner[data-textposition="bl"],
.hero-header__inner[data-textposition="br"] {
  align-content: end;
}

.hero-header__inner[data-textposition="cl"],
.hero-header__inner[data-textposition="cr"],
.hero-header__inner[data-textposition="c"] {
  align-content: center;
}

.hero-header__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.hero-header__bg img,
.hero-header__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-header__copy {
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: max-content;
  grid-row-gap: 0.5em;
  max-width: max-content;
}

.hero-header__inner[data-textposition="tl"] .hero-header__copy,
.hero-header__inner[data-textposition="bl"] .hero-header__copy,
.hero-header__inner[data-textposition="cl"] .hero-header__copy,
.hero-header__inner[data-textposition="c"] .hero-header__copy,
.hero-header__copy[data-justification="left"] *,
.hero-header__copy[data-justification="center"] * {
  margin-right: auto;
}

.hero-header__inner[data-textposition="tr"] .hero-header__copy,
.hero-header__inner[data-textposition="br"] .hero-header__copy,
.hero-header__inner[data-textposition="cr"] .hero-header__copy,
.hero-header__inner[data-textposition="c"] .hero-header__copy,
.hero-header__copy[data-justification="right"] *,
.hero-header__copy[data-justification="center"] * {
  margin-left: auto;
}

.hero-header__copy--main {
  max-width: max-content;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.2em;
}

.hero-header__copy--main[data-fontSize="1"] {
  font-size: 1.75em;
}

.hero-header__copy--main[data-fontSize="2"] {
  font-size: 2em;
}

.hero-header__copy--main[data-fontSize="3"] {
  font-size: 2.25em;
}

.hero-header__copy--main[data-fontSize="4"] {
  font-size: 2.5em;
}

.hero-header__copy--main[data-fontSize="5"] {
  font-size: 2.75em;
}

.hero-header__copy--sub {
  max-width: max-content;
  letter-spacing: 0.25em;
}