/*
|--------------------------------------------------------------------------
| Single Page
|--------------------------------------------------------------------------
*/

.mf-page{
    width:100%;
}

.mf-page__header{
    margin-bottom:2rem;
}

.mf-page__title{
    margin:0;

    color:var(--mf-dark);

    font-size:clamp(
        2rem,
        5vw,
        4rem
    );

    line-height:1.1;

    letter-spacing:-.03em;
}

.mf-page__thumbnail{
    margin-bottom:2rem;

    overflow:hidden;

    border-radius:var(--mf-radius);
}

.mf-page__thumbnail img{
    display:block;

    width:100%;
    height:auto;
}

.mf-page__content{
    max-width:850px;

    color:var(--mf-dark);

    font-size:1.0625rem;

    line-height:1.8;
}

/*
|--------------------------------------------------------------------------
| Content elements
|--------------------------------------------------------------------------
*/

.mf-page__content > *{
    margin-top:0;
}

.mf-page__content > * + *{
    margin-top:1.5rem;
}

.mf-page__content h2,
.mf-page__content h3,
.mf-page__content h4,
.mf-page__content h5,
.mf-page__content h6{
    color:var(--mf-dark);

    line-height:1.2;
}

.mf-page__content h2{
    margin-top:3rem;

    font-size:clamp(
        1.75rem,
        4vw,
        2.5rem
    );
}

.mf-page__content h3{
    margin-top:2.5rem;

    font-size:1.5rem;
}

.mf-page__content a{
    color:var(--mf-primary);
}

.mf-page__content img{
    max-width:100%;
    height:auto;

    border-radius:var(--mf-radius);
}

.mf-page__content blockquote{
    margin:2rem 0;
    padding:1.5rem 2rem;

    border-left:4px solid var(--mf-primary);

    background:rgba(37,99,235,.05);

    font-size:1.25rem;
    font-style:italic;
}

.mf-page__content ul,
.mf-page__content ol{
    padding-left:1.5rem;
}

.mf-page__content li + li{
    margin-top:.5rem;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:767px){

    .mf-page__header{
        margin-bottom:1.5rem;
    }

    .mf-page__thumbnail{
        margin-bottom:1.5rem;
    }

    .mf-page__content{
        font-size:1rem;
    }

    .mf-page__content blockquote{
        padding:1.25rem;

        font-size:1.1rem;
    }

}