<style>   
:root {
    --myLetterPosVertical: 0;
    --myLetterPosVertical767: 0;
    --myLetterPosVertical1199: 0;
    --myLetterPosHorizontal: 0;
}
/* for-phone-only */
@media all and (min-width: 320px) and (max-width: 599px) {
    .letter_over_img {
        display: none;
    }
    ##htmlContentInHeader {
        display: none;       
    }
    .caption {
        position: absolute;
        bottom: -10%;
        width: 80%;
    }
    .captionTitle {
        font-weight:800; 
        font-size:1.7rem;
        line-height:1.7rem;
    } 

}
@media all and (min-width: 600px) and (max-width: 767px) { 
    .letter_over_img {
        position: absolute;
        top: calc( var(--myLetterPosVertical767) * 1% );
        left: calc( var(--myLetterPosHorizontal) * 1% );
        font-size:13rem; 
        font-weight:bold; 
        font-family: 'code_pro_blackregular';
    }
    ##htmlContentInHeader {
        display: none;       
    }
    .captionTitle {
        font-weight:800; 
        font-size:1.8rem;
        line-height:1.8rem;
    }   
}
/* for-tablet-portrait-up */
@media all and (min-width: 768px) and (max-width: 899px) { 
    .letter_over_img {
        position: absolute;
        top: calc( var(--myLetterPosVertical) * 1% );
        left: calc( var(--myLetterPosHorizontal) * 1% );
        font-size:18rem; 
        font-weight:bold; 
        font-family: 'code_pro_blackregular';
    }
    .captionTitle {
        font-weight:800; 
        font-size:2.2rem;
        line-height:2.2rem;
    }   
}
@media all and (min-width: 900px) and (max-width: 991px) { 
    .letter_over_img {
        position: absolute;
        top: calc( var(--myLetterPosVertical) * 1% );
        left: calc( var(--myLetterPosHorizontal) * 1% );
        font-size:18rem; 
        font-weight:bold; 
        font-family: 'code_pro_blackregular';
    }
    .captionTitle {
        font-weight:800; 
        font-size:2.2rem;
        line-height:2.2rem;
    }   
}
/* for-tablet-landscape-up */
@media all and (min-width: 992px) and (max-width: 1199px) { 
    .letter_over_img {
        position: absolute;
        top: calc( var(--myLetterPosVertical1199) * 1% );
        left: calc( var(--myLetterPosHorizontal) * 1% );
        font-size:22rem; 
        font-weight:bold; 
        font-family: 'code_pro_blackregular';
    }
    .captionTitle {
        font-weight:800; 
        font-size:3.2rem;
        line-height:3.2rem;
    }  
}
/* for-desktope-up */
@media all and (min-width: 1200px) { 
    .letter_over_img {
        position: absolute;
        top: calc( var(--myLetterPosVertical) * 1% );
        left: calc( var(--myLetterPosHorizontal) * 1% );
        font-size:30rem; 
        font-weight:bold; 
        font-family: 'code_pro_blackregular';
    }
    .captionTitle {
        font-weight:800; 
        font-size:3.8rem;
        line-height:3.8rem;
    }
}
</style>