.offer {
    height: 100vh;
    background-position-x: center;
    background-repeat: no-repeat;
    background-position-y: -11vh;
}
 
 @media only screen and (min-height: 481px) and (max-height: 768px) {
    .offer {
       background-position-y: 80%;
       padding-top: 8vh;
    }
 }
 
 @media only screen and (min-height: 769px) and (max-height: 840px) {
    .offer {
       background-position-y: 115%;
       padding-top: 22vh;
    }
 }
 
 @media only screen and (min-height: 841px) and (max-height: 1024px) {
    .offer {
       background-position-y: calc(50% - 8vh);
       padding-top: 22vh;
    }
 }
 
 @media only screen and (min-height: 1025px) and (max-height: 1200px) {
    .offer {
        background-position-y: calc(50% - 15vh);
        padding-top: 22vh;
    }
 }
 
 @media only screen and (min-height: 1201px){
    .offer {
        background-position-y: calc(50% - 20vh);
        padding-top: 17vh;
    }
 }