/* ----- Mixins ----- */
@keyframes line-animation {
  0% {
    background-position: 100% var(--line-position);
    background-size: 100% var(--line-height);
  }
  35% {
    background-position: 100% var(--line-position);
    background-size: 0 var(--line-height);
  }
  36% {
    background-position: 0 var(--line-position);
    background-size: 0 var(--line-height);
  }
  100% {
    background-position: 0 var(--line-position);
    background-size: 100% var(--line-height);
  }
}
.hero {
  height: clamp(300px, 70vh, 700px);
  min-height: 300px;
  padding: clamp(2em, 3vw, 4em) 0;
  overflow: hidden;
}
.hero__content {
  width: 100%;
  display: flex;
  align-items: flex-end;
  height: 100%;
  color: var(--color-white);
  z-index: 3;
}
.hero__subheading {
  font-size: var(--font-size-16);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-bigger);
  margin-bottom: 1em;
  color: var(--color-white);
  text-shadow: 0 0 0.25em rgba(0, 0, 0, 0.75);
}
.hero__title {
  font-family: "Lora", serif;
  font-weight: var(--regular);
  font-style: normal;
  font-optical-sizing: auto;
  letter-spacing: var(--letter-spacing);
  font-size: var(--font-size-60);
  color: var(--color-white);
  text-shadow: 0 0 0.25em rgba(0, 0, 0, 0.75);
}
.hero__image {
  object-position: center bottom;
}
@media screen and (max-width: 768px) {
  .hero::before {
    background: linear-gradient(200deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.9) 80%);
  }
  .hero__image {
    object-position: 85% 50%;
  }
}
@media screen and (max-width: 480px) {
  .hero {
    height: clamp(200px, 40vh, 500px);
  }
}