div[data-component="hero"] {
  position: relative;
  height: 480px;
  width: 100%;
  overflow: hidden;

  & > div.background {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-repeat: repeat-x;
    background-size: auto 200%;
    background-position: center 80%;
    min-width: 100%;
    width: 100%;
    left: 0;
    transform: none;
  }

  & > div.overlay {
    position: absolute;
    inset: 0;
    background-color: black;
    opacity: 0.5;
    z-index: 2;
  }

  & > div:last-child {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;

    & > img {
      width: 144px;
      height: 224px;
    }
  }
}