/* ==========================================================
   HOME
========================================================== */

.container{
    width:1200px;
    margin:30px auto;
}

/* ==========================================================
   HERO
========================================================== */

.hero{
    display:grid;
    grid-template-columns:43% 57%;
    align-items:center;

    background:#faf8f5;
border-radius: 12px;
    overflow:hidden;
}

.hero-text{
    padding-top:20px;
padding-bottom:20px;
}

.hero-meta{
    display:block;
    margin-bottom:1rem;
    font-size:.8rem;
    letter-spacing:.12em;
    text-transform:none;
    color:#999;
}

.hero h2{
    margin:0 0 2rem;
}
.hero-image {
border-radius: 12px;
overflow:hidden;
}
.hero-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
border-radius: 12px !important;
}

/* ==========================================================
   CARDS
========================================================== */

.post-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;

    margin:3rem 0;
}


.card__date{
    display:block;
    margin-bottom:.5rem;
    font-size:.8rem;
    text-transform:none;
    color:#888;
text-align: center;
padding-top: 15px;
}

.card{
    display:flex;
    flex-direction:column;

box-shadow: 0 4px 18px rgba(0,0,0,.04);

}

.card__title{
    min-height:4.8rem;
text-align: center;
}

.card__title{
    margin:0 0 1rem;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
a.button {
text-align:center;
padding-bottom: 15px;
}

.card__title a{
    text-decoration:none;
    color:#fa0063;
}

.card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    line-height: 0;
    /* margin-bottom: -1rem;  <-- tijdelijk uitzetten */

}

.card__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: inherit;
}
p.card__intro{
position: relative;
top: -55px !important;
    margin-bottom:1.5rem;
padding-left: 15px;
padding-right: 15px;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

    .container{
        width:calc(100% - 40px);
    }

    .hero{
        grid-template-columns:1fr;
    }

    .hero-text{
        padding:50px;
    }

    .post-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .container{
        width:calc(100% - 32px);
    }

    .hero-text{
        padding:35px 25px;
    }

    .post-grid{
        grid-template-columns:1fr;
        gap:2.5rem;
    }

}