@layer vendor {
  .block--hero {
    .block--hero__content {
      grid-area: inner-content;
      z-index: 2;
      grid-template-areas: "c c c c c c c c c c c c";
      align-content: center;
    }

    .block--hero__inner-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .block--hero__media {
      grid-area: inner;
      z-index: 1;
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    .block--hero__media > * {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @media (min-width: 768px) {
      .block--hero__content {
        grid-template-areas: ". . . . . . . . c c c c";
      }
    }
  }
}