.hero {
  --size-heading-h1: clamp(4rem, 5vw, 6rem);
  --type-heading-h1:
    var(--font-weight-regular)
    var(--size-heading-h1) / var(--line-height-heading-h1)
    var(--font-heading);

  display: grid;

  
  grid-template-columns:
    [full-start] 1fr
    [content-start] var(--container) [content-end]
    1fr [full-end];

  
  row-gap: var(--spacing-block-lg);
  padding-block-start: var(--spacing-block-lg);
}

.hero__heading {
  grid-column: content;
  margin-block-end: calc(var(--spacing-block-xl) - var(--spacing-block-lg));

  
  display: flex;
  flex-direction: column;
  gap: var(--spacing-heading-h1);

  
  text-align: center;
}

.hero__title {
  font: var(--type-heading-h1);

  
  color: var(--color-text-heading-brand);
}

.hero__subtitle {
  
  font: var(--type-heading-h3);
  color: var(--color-text-heading);
}

.hero__cover {
  grid-column: content;

  
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);

  
  aspect-ratio: 4 / 3;

  
}

.hero__intro {
  grid-column: content;

  
  width: var(--measure);
  margin-inline: auto;

  
}

.hero__story {
  grid-column: content;

  
  width: var(--measure);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .hero__cover {
    
    aspect-ratio: 16 / 9;
  }
}