.header{
    background-image: url("../../images/spidermanheader.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    position: relative;
}

.header-image-title{
    width: auto;
    height: 18rem;
    position: absolute;
    left: 10rem;
    bottom: 7rem;
}

/*config header for tablet 768px*/
@media screen and (max-width: 768px){
    .header {
        background-image: url("../../images/spidermanheader_mobile.jpg");
        background-position: center;
    }

    .header-image-title{
        height: 11rem;
        left: 2rem;
        bottom: 3rem;
        position: absolute;
    }

}

/*config header for mobile 483px*/
@media screen and (max-width: 483px){
    .header {
        height: 60vh;
    }

    .header-image-title{
        height: 8rem;
        left: 1rem;
        bottom: 2rem;
        position: absolute;
    }

}

@media screen and (max-height: 530px){

    .header-image-title{
        height: 8rem;
        left: 3rem;
        bottom: 5rem;
    }

}