.hero {
  max-width: $width-content;
  margin: 0 auto;
  padding: 2rem 2rem 0 2rem;

  h1 {
    font-size: 2.5rem;
  }

  .meta {
    font-size: 0.8rem;

    .date {
      color: var(--text-600);
    }

    .duration {
      color: color-mix(in srgb, var(--text) 50%, var(--background));
    }
  }

  .captioned-image {
    padding-top: 1.5rem;
  }
}

.hero + .content {
  padding-top: 0;
}

@media (max-width: $width-mobile) {
  .hero {
    padding: 1rem 1em 0 1rem;
  }
}