@layer component.base {
  .hero {
    display: grid;
    grid-template: "stack" 100% / auto;
  }

  .hero::before {
    content: "";
    grid-area: stack;
    height: 100%;
    width: 100%;
    display: block;
  }

  .hero__background {
    grid-area: stack;
    img {
      width: 100%;
      vertical-align: bottom;
    }
  }

  .hero__foreground {
    grid-area: stack;
    position: relative;
    width: 100%;
  }

  .hero__foreground-wrap {
    max-width: var(--content-width);
    margin: auto;
    width: 100%;
  }

  .hero__foreground-inner {
    max-width: 30rem;
  }
}