/* ************************************************** */
/* hero: page hero (afbeelding + titel)                 */
/* ************************************************** */

.page-hero{margin:0 0 30px 0}
.page-hero .inside-page-hero{display:flex}
.page-hero .featured-img{background:#000;flex:0 0 50%}
.page-hero .featured-img img{animation:ani-page-hero 1.5s 1 normal ease-in-out forwards 0s;display:block;visibility:hidden}
.page-hero .post-title{align-items:center;background:#000;display:flex;flex:0 0 50%;flex-direction:column;justify-content:center}
.page-hero .post-title h1{text-align:center;margin:0}
.page-hero .post-title h1 .large{color:var(--accent);display:block;margin:0 0 30px 0;text-transform:uppercase}
.page-hero .post-title h1 .small{color:#fff;display:block;margin:0 0 30px 0}

@media (width < 768px) {
    .page-hero{margin:0 0 10px 0}
    .page-hero .inside-page-hero{display:block;padding:0}
    .page-hero .post-title{height:0;padding-top:100%;position:relative}
    .page-hero .post-title .pos{align-items:center;bottom:30px;display:flex;flex-direction:column;justify-content:center;left:30px;position:absolute;right:30px;top:30px}
    .page-hero .post-title h1 .large{font-size:8vw;line-height:9vw}
    .page-hero .post-title h1 .small{font-size:5vw;line-height:7vw}
}
@media (width >= 768px) and (width < 1024px) {
    .page-hero{margin:0 0 15px 0}
    .page-hero .inside-page-hero{display:flex;padding:0 10px}
    .page-hero .post-title{padding:40px}
    .page-hero .post-title h1 .large{font-size:5vw;line-height:7vw}
    .page-hero .post-title h1 .small{font-size:2.5vw;line-height:4vw}
}
@media (width >= 1024px) {
    .page-hero .inside-page-hero{display:flex;padding:0 40px}
    .page-hero .post-title{padding:60px}
    .page-hero .post-title h1 .large{font-size:46px;line-height:56px}
    .page-hero .post-title h1 .small{font-size:20px}
}

@keyframes ani-page-hero{
    0%{opacity:0;visibility:hidden}
    100%{opacity:1;visibility:visible}
}