@media screen отдельно для каждого модуля., недостатки?

/*
 
 --- header module
 
 
*/
 
.header {
    position: relative;
    width: 100 %;
    min-height: 5em;
    border: 1px solid blue;
}
 
.header__title {
    position: absolute;
    top: 2em;
    left: 40%;
    width: 60%;
    font-size: 3em;
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 1em red;
}
 
.header__imgwrapper {
 
}
 
.header__img {
    width: 10%;
    max-width: 100%;
    height: 8em;
}
 
 
@media screen and (max-width: 1100px) { 
   
.header__title {
    top: 1.8em;
    font-size: 2.6em;
    color: blue;
}
 
.header__img {
    height: 7em;
}
 
 
 
}
 
 
@media screen and (max-width: 900px) { 
   
.header__title {
    top: 1.5em;
    font-size: 1.7em;
    color: red;
    text-shadow: 1px 1px 2px black, 0 0 1em red;
}
 
.header__img {  
    height: 4em;
}
 
}
 
 
@media screen and (max-width: 400px) { 
   
.header__title {
    top: 0.3em;
    font-size: 1.2em;
    color: green;
    text-shadow: 1px 1px 2px black, 0 0 1em red;
}
 
.header__img {
    height: 2em;
}
 
}
/*
 
 --- End of header module
 
 
*/