.hero__image {
  margin-inline: auto;
  margin-bottom: var(--spacing-xxxlarge);
}

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

.hero__intro {
  margin-bottom: var(--spacing-xxxlarge);
  font-size: var(--font-size-large-a);
}

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

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

/* Large hero */
.hero--large {
  margin-bottom: var(--spacing-xxxlarge);
}

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

.hero--large .hero__intro {
  margin-bottom: 0;
  margin-top: var(--spacing-xxxlarge);
}