.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24rem;
  padding: 12rem 0 6rem;

  .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    opacity: 0.25;
  }

  @media (width >= 576px) {
    min-height: 32rem;
    padding: 10rem 0 5rem;
    .hero-image {
      object-fit: none;
      scale: 1;
    }
  }
}