.hero {
  align-items: flex-end;
  display: flex;
  margin: 0 auto;
  max-width: var(--size-max-width);
  min-height: 200px;
  padding: 0 0 var(--size-gutter);
  position: relative;
}

.image {
  /*
    Ensure golden ratio for the hero size while limiting it to some extend to
    the viewport width
  */
  height: 61.8vh;
  max-height: 560px;
  width: 100%;
}

.details {
  background: var(--background);
  left: 0;
  max-width: 40rem;
  width: 85%;
  padding: var(--space-2xl) var(--size-gutter) 0;
  position: absolute;
}

.title {
  letter-spacing: -0.012em;
  font-size: var(--text-title);
  font-weight: var(--extrabold);
  line-height: var(--solid);
  margin: 0 0 var(--space-xl);
}

.content {
  font-size: var(--text-lead);
  font-weight: var(--semibold);
  margin: 0;
}

@media (min-width: 480px) {
  .details {
    padding-top: var(--space-3xl);
  }
}

@media (min-width: 768px) {
  .hero {
    padding-top: var(--size-gutter);
  }

  .details {
    max-width: 44rem;
    padding: var(--space-3xl) var(--size-gutter) 0;
  }
}

@media (min-width: 1024px) {
  .image {
    margin-left: auto;
    width: 85%;
  }

  .details {
    left: var(--size-gutter);
    padding: var(--space-3xl) var(--size-gutter) 0 0;
  }
}
