.hero {
  display: grid;

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

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

.hero__ticker {
  
  grid-column: full;
}

.hero__heading {
  grid-column: content;

  
  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;
  }
}