/**
 * @file
 * Component: Hero Homepage.
 */

.hero-homepage {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  align-items: center;
}

.hero-homepage__image {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: relative;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.hero-homepage__image::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: var(--homepage-overlay);
}

.hero-homepage__image img {
  object-fit: cover;
  width: 100%;
  max-height: 700px;
}

.hero-homepage__content-wrapper {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 10;
  max-width: var(--hero-width-lg);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

@media screen and (min-width: 48em) {
  .hero-homepage__content-wrapper {
    gap: var(--spacing-xl);
    max-width: var(--hero-width-xl);
  }
}

.hero-homepage__content {
  grid-column: 1 / -1;
}

@media screen and (min-width: 48em) {
  .hero-homepage__content {
    grid-column: 1 / span 6;
  }
}

@media screen and (min-width: 72em) {
  .hero-homepage__content {
    grid-column: 1 / span 12;
    max-width: 100%;
  }
}

h2.hero-homepage__title {
  font-weight: var(--font-weight-light);
  margin-bottom: var(--spacing-lg);
}

h2.hero-homepage__title.hero-homepage--extra-large {
  font-size: var(--font-size-h1);
}

.hero-homepage__introduction {
  display: none;
}

@media screen and (min-width: 48em) {
  .hero-homepage__introduction {
    display: block;
    font-size: var(--font-size-body-responsive);
    line-height: var(--line-height-heading);
    margin-bottom: var(--spacing-xl);
  }
}

.hero-homepage .social-share {
  justify-content: end;
  margin-top: var(--spacing-xl);
}