.hero-title {
    font-family: 'Merriweather', serif;
    font-weight: 900;
    font-size: 42px;
    line-height: 53px;
    color: #062275;
    white-space: pre-line;
    margin-top: 15px;
    margin-bottom: 20px;
}

.sub-title {
    font-size: 18px;
    line-height: 35px;
    color: #062275;
    white-space: pre-line;
}

.sub-title-2 {
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.0015em;
    color: #062275;
}

.sub-title-3 {
    font-family: 'Merriweather', serif;
    font-size: 18px;
    line-height: 35px;
    color: rgba(17, 51, 85, 0.56);
}

.title {
    font-family: 'Merriweather', serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 49px;
    color: #113355;
}

.title-2 {
    font-family: Merriweather;
    font-size: 28px;
    line-height: 42px;
    color: rgba(17, 51, 85, 0.87);
}

.title-article {
    font-size: 20px;
    line-height: 23px;
    letter-spacing: 0.0015em;
    font-weight: 500;
    color: #062275;
}

.body-article {
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 0.0025em;
    color: rgba(0, 0, 0, 0.56);
}

@media (max-width: 800px) {
   .hero-title, .title, .title-2, .title-article, .sub-title-3, .sub-title-2, .sub-title, .body-article {
        white-space: normal;
        text-align: center;
        max-width: 90%;
    }
}

@media (max-width: 800px) {
    .hero-title {
         font-size: 37px;
     }
     .title-article {
         max-width: 100%;
     }
     .body-article {
        max-width: 100%;
    }
 }