/* @group Article-news
------------------------------------ */

.article-news { margin-bottom: 10em; position: relative; }

/* Header
------------------------------------ */
.article-news header { color: var(--navy-blue); margin-bottom: 5em; }
.article-news header h2 { font: unset; width: fit-content; margin: 0 auto; }
.article-news header h2 sup { text-transform: uppercase; font-weight: 700; font-size: 3em; line-height: 1em; letter-spacing: .06em; display: block; }
.article-news header h2 span { font-family: var(--celine-font); font-size: 6em; line-height: .5em; letter-spacing: .033em; display: block; text-align: right; padding-left: .8em; }

/* Splide
------------------------------------ */
.article-news .splide .splide__slide { background-color: var(--navy-blue); color: var(--white); position: relative; }
.article-news .splide .splide__slide .background { position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; height: 15em; }
.article-news .splide .splide__slide .image { height: 25em; margin: 0 3em; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.04); }
.article-news .splide .splide__slide .image::after { content: ''; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 64.58%, rgba(0, 0, 0, 0.45) 100%); }
.article-news .splide .splide__slide .txt-box { padding: 0 3em .5em; position: relative; top: -2.5em; }
.article-news .splide .splide__slide .txt-box h3 { font: unset; margin-bottom: 2.5em; }
.article-news .splide .splide__slide .txt-box h3 sup { text-transform: uppercase; text-align: center; display: block; font-size: 3em; font-weight: 700; line-height: 1em; letter-spacing: .066em; }
.article-news .splide .splide__slide .txt-box h3 span { font-family: var(--celine-font); text-align: right; display: block; font-size: 6em; line-height: .5em; letter-spacing: .033em; }
.article-news .splide .splide__slide .txt-box p { font-size: 1.6em; line-height: 1.5em; letter-spacing: .125em; margin: 0 0 1.875em; }
.article-news .splide .splide__slide .txt-box .bttn-outlined { color: var(--white); --bg-color: transparent; min-width: 13.375em; text-align: center; }

.article-news .splide__arrows { margin-top: 3.6em; }
.article-news .splide__arrows .splide__arrow { position: static; }
.article-news .splide__arrows .splide__arrow--prev { margin-right: 2em; }
.article-news .splide__pagination { bottom: .9em; justify-content: flex-end; }

@media only screen
and (min-width : 961px) {

    .article-news { margin-bottom: 15rem; }

    /* Header
    ----------------------------- */
    .article-news header { margin-bottom: 7.3rem; }
    .article-news header h2 sup { font-size: 8em; letter-spacing: .025em; }
    .article-news header h2 span { font-size: 10.5em; letter-spacing: .019em; }
    /* Splide
    ----------------------------- */
    .article-news .splide .splide__slide { transition: all .3s ease; }
    .article-news .splide .splide__slide:hover { background-color: var(--red); }
    .article-news .splide .splide__slide .background { height: 31.5rem; }
    .article-news .splide .splide__slide .image { height: 43rem; }
    .article-news .splide .splide__slide .txt-box { top: -4.5rem; padding: 0 3rem 0; }
    .article-news .splide .splide__slide .txt-box h3 { margin-bottom: 4.5rem; }
    .article-news .splide .splide__slide .txt-box h3 sup { font-size: 5.5em; letter-spacing: .036em; }
    .article-news .splide .splide__slide .txt-box h3 span { font-size: 12em; letter-spacing: .0166em; padding: 0 2.5rem;  }
    .article-news .splide .splide__slide .txt-box p { font-size: 2em; line-height: 1.35em; letter-spacing: .1em; }

    
    .article-news .splide__arrows .splide__arrow--prev { margin-right: 3rem; }
    .article-news .splide__pagination { bottom: 1.3rem; }
    
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {

}
@media only screen
and (max-width : 960px) {
    /* Splide
    ----------------------------- */
    .article-news .splide { padding: 0 0 0 3em; }
    .article-news .splide .splide__track { padding-right: 10em!important; }
}
/* @end  */