.article-header{border-bottom: 1rem solid var(--color-neutral-2);}
.article-header .title-banner{position: relative;font-size: 0;}
.article-header .title-banner img{width: 100%;}
.article-header .title-banner .title-text{position: absolute;top: 50%;left: 50%;width: 100%;text-align: center;color: #fff;font-size: 32rem;font-weight: 500;}
.article-header .title-banner .title-text{opacity: 0;visibility: hidden;transform: translate3d(-50%, calc(-50% + 5rem), 0);animation: fadeInUpTitle 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;animation-fill-mode: both;}

@media all and (max-width:860px) {
    .article-header .title-banner > img{display: none;}
    .article-header .title-banner .title-text{position: static;color: #000;font-size: 20rem;font-weight: 400;padding: 15rem 0;opacity: 0;visibility: hidden;transform: translate3d(0, 5rem, 0);animation: fadeInUpTitleMobile 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;animation-fill-mode: both;}
}

@keyframes fadeInUpTitle { 
    from { opacity: 0; transform: translate3d(-50%, calc(-50% + 5rem), 0); visibility: hidden; } 
    to { opacity: 1; transform: translate3d(-50%, -50%, 0); visibility: visible; } 
}

@keyframes fadeInUpFixed { 
    from { opacity: 0; transform: translate(-50%, calc(-50% + 20rem)); } 
    to { opacity: 1; transform: translate(-50%, -50%); } 
}

@keyframes fadeInUpTitleMobile { 
    from { opacity: 0; transform: translate3d(0, 5rem, 0); visibility: hidden; } 
    to { opacity: 1; transform: translate3d(0, 0, 0); visibility: visible; } 
}