/**
 * @file
 * Component: Hero.
 *
 * Styles for the hero component, including variations for small, large, and
 * extra-large sizes, and adjustments for introduction placement.
 */

.hero {
  display: flex;
  flex-direction: column;
}

.hero__image {
  margin-bottom: var(--spacing-3xl);
}

.hero__image img {
  object-fit: cover;
  border-radius: var(--hero-border-radius);
  width: 100%;
}

.hero__image-caption {
  padding-inline: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--hero-caption-color);
  font-style: italic;
  margin-top: var(--spacing-xs);
}

.hero__introduction {
  font-size: var(--font-size-xl);
}

/* Small hero */
.hero--small .hero__image {
  max-width: var(--hero-width-sm);
}

/* Large hero */
.hero--large .hero__image {
  max-width: var(--hero-width-xl);
}

.hero--large .hero__introduction {
  margin-bottom: var(--spacing-lg);
}

/* Extra large hero */
.hero--xlarge {
  margin-bottom: var(--spacing-3xl);
}

.hero--xlarge .hero__image {
  max-width: var(--hero-width-xl);
}

.hero--xlarge .hero__introduction {
  margin-top: var(--spacing-3xl);
}

/* Responsive adjustments */
@media screen and (min-width: 48rem) {
  .hero__introduction {
    font-size: var(--font-size-2xl);
  }

  .hero__image {
    margin-inline: auto;
  }
}

/* Hero introduction placement */
.hero.hero-introduction-top {
  .hero__introduction {
    order: 2;
  }

  .hero__image {
    order: 1;
  }
}