#hero .container {
  padding: 0 15px;
  min-height: unset;
}

#hero .inner {
  background-image: url('../../../images/benefits/redesign/benefits-hero.jpg');
  background-image: image-set(url('../../../images/benefits/redesign/benefits-hero.jpg') 1x,
      url('../../../images/benefits/redesign/benefits-hero@2x.jpg') 2x);
  min-height: 343px;
}

#hero .title {
  font-size: 83px;
  line-height: 1em;
  transform: rotate(-3deg);
}

#hero .title::before {
  content: '';
  position: absolute;
  background-image: url('../../../images/benefits/redesign/title-decor.png');
  background-image: image-set(url('../../../images/benefits/redesign/title-decor.png') 1x,
      url('../../../images/benefits/redesign/title-decor@2x.png') 2x);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 694px;
  height: 200px;
  left: 47%;
  transform: translateX(-50%) rotate(3deg);
  bottom: -58px;
  z-index: -1;
}

#hero p {
  font-size: 18px;
  line-height: 26px;
  max-width: 814px;
}

@media screen and (max-width: 768px) {
  #hero {
    margin-top: 30px;
  }

  #hero .inner {
    padding: 94px 0 103px 0;
    min-height: unset;
    background-image: url('../../../images/benefits/redesign/benefits-hero-m.jpg');
    background-image: image-set(url('../../../images/benefits/redesign/benefits-hero-m.jpg') 1x,
        url('../../../images/benefits/redesign/benefits-hero-m@2x.jpg') 2x);
  }

  #hero .title {
    font-size: 41px;
    margin: 0 auto;
  }

  #hero .title::before {
    width: 359px;
    height: 104px;
    bottom: -24px;
  }

  #hero p {
    margin-top: 26px;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
  }
}