/*==================================================
    BLOG.CSS
    My Lolita Wardrobe
==================================================*/


/*==============================
    BLOG GRID
==============================*/

.blogGrid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:10px;

}

.blogCard{

    display:block;

    background:var(--card);

    border:1px solid var(--gold-line);

    border-radius:20px;

    overflow:hidden;

    text-align:left;

    transition:.3s;

    color:var(--ink);

    border-bottom:none;

}

.blogCard:hover{

    transform:translateY(-6px);

    box-shadow:0 10px 20px rgba(194,24,91,.2);

    color:var(--ink);

    border-bottom:none;

}

.blogCardImage{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    display:block;

}

.blogCardBody{

    padding:16px 18px 22px;

}

.blogCardDate{

    font-size:.8rem;

    letter-spacing:.5px;

    text-transform:uppercase;

    color:var(--gold-deep);

    font-weight:600;

}

.postBody h3{
  
    font-family:'Cormorant Garamond',serif;
    
    font-size:1.4rem;
    
    color:var(--wine);
    
    margin:22px 0 10px;
}


.postBody h4{
  
    font-family:'Cormorant Garamond',serif;
    
    font-size:1.4rem;
    
    color:var(--wine);
    
    margin:22px 0 10px;
}

.postBody h5{
  
    font-family:'Cormorant Garamond',serif;
    
    font-size:1.4rem;
    
    color:var(--wine);
    
    margin:22px 0 10px;
}
.postBody h6{
  
    font-family:'Cormorant Garamond',serif;
    
    font-size:1.4rem;
    
    color:var(--wine);
    
    margin:22px 0 10px;
}
.postBody h7{
  
    font-family:'Cormorant Garamond',serif;
    
    font-size:1.4rem;
    
    color:var(--wine);
    
    margin:22px 0 10px;
}
.postBody h8{
  
    font-family:'Cormorant Garamond',serif;
    
    font-size:1.4rem;
    
    color:var(--wine);
    
    margin:22px 0 10px;
}
.blogCardExcerpt{

    color:var(--ink-soft);

    font-size:.92rem;

    line-height:1.5;

}

.blogReadMore{

    display:inline-block;

    margin-top:12px;

    color:var(--rose);

    font-family:'Cormorant Garamond',serif;

    font-weight:600;

    font-size:.95rem;

}

.blogCard:hover .blogReadMore{

    color:var(--gold-deep);

}


/*==============================
    SINGLE POST LAYOUT
==============================*/

.postMeta{

    color:var(--ink-soft);

    font-size:.9rem;

    font-style:italic;

    margin-bottom:18px;

}

.postBody p{

    margin-bottom:16px;

}

.postBody h3{

    color:var(--wine);

    margin:22px 0 10px;

}

.postBody img{

    border-radius:16px;

    margin:10px 0;

}

.backToBlog{

    display:inline-block;

    margin-top:10px;

}


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

@media (max-width:900px){

.blogGrid{

    grid-template-columns:repeat(2,1fr);

}

}

@media (max-width:500px){

.blogGrid{

    grid-template-columns:1fr;

}

}