.main-header {
   height: 100px;
   background-position-x: 50%;
   background-position-y: 100px;
   background-repeat: no-repeat;
   background-size: 80%;
}

@media screen and ( min-width: 400px ) {
   .main-header {
      background-position-y: 80px;
      background-size: 60%;
   }
}

@media screen and ( min-width: 576px ) {
   .main-header {
      background-size: 50%;
   }
}

@media screen and ( min-width: 768px ) {
   .main-header {
      height: 358px;
      background-position-y: 120px;
      background-size: 40%;
   }
}

@media screen and ( min-width: 1140px ) {
   .main-header {
      background-position-y: 80px;
   }
}

@media screen and ( min-width: 1482px ) {
   .main-header {
      background-size: 30%;
   }
}

@media screen and ( min-width: 2200px ) {
   .main-header {
      background-size: 20%;
   }
}