@media (width >= 1200px) {
  .hero-default.hero-wrapper {
    position: relative;
  }

  .hero-default.hero-wrapper .media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  .hero-default.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
  }

  .hero-default.hero-default.hero-wrapper .media img,
  .hero-default.hero-wrapper .media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
  }


  .hero-default.hero .content {
      /* width: 100%; */
      max-width: none;
      flex: 0 0 auto;
  }
}

@media (width <= 1199px) {
  .hero-default.hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}