#hero {
    
    gap: 5rem;
    
    height: 20rem;
  }
  
  #hero::before {
    
    background-image: url(https://albmedtour.it/pub/file/51ce6e86/b0a1ebfd/desktop-banner.png);
    background-size: cover;
    background-position: -23rem 0rem;
    background-repeat: no-repeat;
  }
  
  #hero span {
    
    font-family: "DK Lemon Yellow Sun";
    font-size: 3rem;
    
    line-height: 1.1;
    
    transform: rotate(-6deg);
    
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0.05rem 0.05rem 0 rgba(0, 0, 0, 1);
  }
  
  #hero a img {
    display: inline;
    margin-left: 0.5em;
    max-width: 0.5em;
  }
  
  
  @media screen and (min-width: 400px) {
    
    #hero::before {
      
      background-position: -22rem 0rem;
    }
  }
    
  @media screen and (min-width: 440px) {
    
    #hero::before {
      
      background-position: -21rem 0rem;
    }
  }
    
  @media screen and (min-width: 460px) {
    
    #hero::before {
      
      background-position: -20rem 0rem;
    }
  }
    
  @media screen and (min-width: 480px) {
    
    #hero::before {
      
      background-position: -19rem 0rem;
    }
  }
    
  @media screen and (min-width: 500px) {
    
    #hero::before {
      
      background-position: -18rem 0rem;
    }
  }
    
  @media screen and (min-width: 520px) {
    
    #hero {
      padding-left: 2rem;
    }
    
    #hero::before {
      
      background-position: -17rem 0rem;
    }
  }
    
  @media screen and (min-width: 550px) {
    
    #hero::before {
      
      background-position: -16rem 0rem;
    }
  }
    
  @media screen and (min-width: 570px) {
    
    #hero::before {
      
      background-position: -15rem 0rem;
    }
  }
    
  @media screen and (min-width: 590px) {
    
    #hero::before {
      
      background-position: -14rem 0rem;
    }
  }
    
  @media screen and (min-width: 610px) {
    
    #hero::before {
      
      background-position: -13rem 0rem;
    }
  }
    
  @media screen and (min-width: 630px) {
    
    #hero::before {
      
      background-position: -12rem 0rem;
    }
  }
    
  @media screen and (min-width: 660px) {
    
    #hero {
      padding-left: 3rem;
    }
  }
    
  @media screen and (min-width: 670px) {
    
    #hero::before {
      
      background-position: -11rem 0rem;
    }
  }
    
  @media screen and (min-width: 690px) {
    
    #hero::before {
      
      background-position: -10rem 0rem;
    }
  }
    
  @media screen and (min-width: 710px) {
    
    #hero::before {
      
      background-position: -9rem 0rem;
    }
  }
    
  @media screen and (min-width: 730px) {
    
    #hero::before {
      
      background-position: center
    }
  }
    
  @media screen and (min-width: 800px) {
    
    #hero {
      padding-left: 4rem;
    }
  }
    
  @media screen and (min-width: 840px) {
    
    #hero {
      padding-left: 5rem;
    }
  }
    
  @media screen and (min-width: 880px) {
    
    #hero {
      padding-left: 6rem;
    }
  }
    
  @media screen and (min-width: 920px) {
    
    #hero {
      padding-left: 7rem;
    }
  }
    
  @media screen and (min-width: 950px) {
    
    #hero span {
      font-size: 3.5rem;
    }
    
    #hero {
      height: 22rem;
      padding-left: 6rem;
    }
  }
    
  @media screen and (min-width: 1000px) {
    
    #hero {
      padding-left: 7rem;
    }
  }
    
  @media screen and (min-width: 1040px) {
    
    #hero span {
      font-size: 4rem;
    }
    
    #hero {
      height: 24rem;
    }
  }
    
  @media screen and (min-width: 1140px) {
    
    #hero {
      height: 26rem;
    }
  }
    
  @media screen and (min-width: 1240px) {
    
    #hero {
      height: 28rem;
      padding-left: 6rem;
    }
  }
    
  @media screen and (min-width: 1340px) {
    
    #hero {
      height: 30rem;
      padding-left: 5rem;
    }
    
    #hero span {
      font-size: 4.5rem;
    }
  }
    
  @media screen and (min-width: 1440px) {
    
    #hero {
      height: 32rem;
      padding-left: 4rem;
    }
  }
    
  @media screen and (min-width: 1600px) {
    
    #hero {
      padding-left: 3rem;
    }
    
    #hero span {
      font-size: 5rem;
    }
  }
    
  @media screen and (min-width: 1700px) {
    
    #hero {
      padding-left: 2rem;
    }
  }