.bfcm-hero {
  max-height: 80vh;
  width: 100%;
  aspect-ratio: 375 / 532;
  display: flex;
  align-items: center;
  justify-content: center;

  @media screen and (min-width: 768px) {
    max-height: unset;
    aspect-ratio: auto;
  }

  .bfcm-hero__content {
    max-width: 480px;
    margin-inline: auto;

    @media screen and (min-width: 768px) {
      max-width: 700px;
    }

    @media screen and (min-width: 1200px) {
      max-width: 830px;
    }
  }

  .bfcm-hero__background {
    position: absolute;
    inset: 0;
    pointer-events: none;

    picture {
      display: block;
      width: 100%;
      height: 100%;
    }

    img {
      max-width: 100%;
      height: 100%;
      width: 100%;
      object-fit: cover;
      display: block;
    }
  }
}