/* ==========================================================
   HOME
========================================================== */
.container{
    width:min(1320px, calc(100% - 80px));
    margin:0 auto;
}
.hero{
    width:100%;
    min-height:460px;

    display:grid;
    grid-template-columns:43% 57%;

    background:#faf8f5;
}

.hero-text{

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:80px 90px;

}

.hero-kicker{

    font-size:.72rem;
    letter-spacing:.35em;
    text-transform:uppercase;

    color:#999;

    margin-bottom:20px;

}

.hero h1{

    font-family:"The Seasons",serif;
    font-size:5.2rem;
    line-height:.9;
    font-weight:400;

    margin:0;

    color:#322923;

}

.hero-tagline{

    font-family:"The Seasons",serif;
    font-style:italic;

    font-size:2rem;

    margin:28px 0;

    color:#8a665e;

}

.hero p{

    max-width:470px;

    line-height:1.9;

    color:#555;

}

.hero-button{

    display:inline-block;

    margin-top:36px;

    padding:15px 32px;

    background:#7a4f47;

    color:#fff;

    text-decoration:none;

}

.hero-photo{

    height:460px;

    overflow:hidden;

}

.hero-photo img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

}

/* mobiel */

@media (max-width:900px){

.hero{

grid-template-columns:1fr;

}

.hero-text{

padding:50px 35px;

}

.hero-photo{

height:340px;

}

.hero h1{

font-size:3.8rem;

}

}
/* ==========================================================
   INTRO BLOKKEN
========================================================== */

.home-intro {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 2rem;
    margin: 0 0 6rem;
}
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.intro-card {
    background: #fff;
    padding: 2.5rem;
    border: 1px solid #ece7e2;
    transition: .25s ease;
}

.intro-card:hover {
    transform: translateY(-4px);
}

.intro-card h2 {
    font-family: "The Seasons", serif;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #3a2d28;
}

.intro-card p {
    color: #666;
    line-height: 1.8;
}

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

@media (max-width: 1100px) {

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

    .hero-content {
        order: 2;
        padding: 4rem 2rem;
    }

    .hero-image {
        order: 1;
        height: 420px;
    }

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

}

@media (max-width: 700px) {

    .hero h1 {
        font-size: 3.3rem;
    }

    .hero-tagline {
        font-size: 1.4rem;
    }

    .home-intro {
        grid-template-columns: 1fr;
    }

}