/* blog-index */
.blogCard{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 0.5em;
    grid-template-areas: "four three" "two one";
}

.cardBody{
    font-family: 'dual', fallback, sans-serif;
    display: grid;
    margin: 2em;
    justify-content: center;
    align-items: flex-start;
}

.cardOne{grid-area: one;}
.cardTwo{grid-area: two;}
.cardThree{grid-area: three;}
.cardFour{grid-area: four;}

.cardBody p{
    font-weight: 300;
}

.blogLink a{
    color: #000;
    font-style: normal;
}

/* .holder{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 10em;
    gap: 2em;
} */

.card__image{
    width: 30em;
    height: 22em;
    border-radius: 0.5em 0.5em 0 0;
}
/* .card_header img{
    max-width: 100%;
    display: block;
    object-fit: cover;
} */

.card{
    /* display: flex;
    flex-direction: column;
    overflow: hidden; */
    width: 30em;
    box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
    border-radius: 0.5em;
    background: #fff;
}

.card__body{
    padding: 1em;
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.tag{
    align-self: flex-start;
    font-size: .5em;
}

.card__body h4{
    font-weight: 900;
    font-size: 1.5em;
}

.blogMore:hover{
    font-style: italic;
    color: #cb5827;
}

/* blog-show */
.showArticle{
    padding-bottom: 1em;
    margin: 0 18em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.showArticle h1{
    text-align: center;
    font-family: 'amsterdam', fallback, brush script MT;
    margin: 0.5em;
    font-size: 3em;
    letter-spacing: 1px;
    line-height: 2;
}

.date{
    font-size: 0.5em;
    justify-content: left;
    padding-top: 1em;
    /* text-align: left; */
}

.blogTopImage{
    width: 45em;
    height: 20em;
    max-width: 100%;
    display: block;
    object-fit: cover;
}

.showArticleMain{
    margin-top: 1em;
}

.showArticleMain h3{
    font-family: 'dual', fallback, sans-serif;
    text-align: left;
    padding: 1em 0;
}

.showArticleMain p{
    font-family: 'dual', fallback, sans-serif;
    text-align: justify;
    margin: 1em 0;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.3;
}

.showArticleMain a{
    padding: 0;
}

.blogSmallImage{
    width: 40em;
    height: 25em;
    margin: 1em;
}

.blogSmallImageTall{
    width: 40em;
    height: 40em;
    margin: 1em;
}

.credit{
    font-size: 1em;
    color: #000;
    font-style: normal;
    padding: 0;
}

.back button{
    margin: 2em;
}

/*bigger desktop*/
@media screen and (max-width:1200px){
    section.blogCard {grid-template-columns: 1fr; grid-template-areas: "four" "three" "two" "one";}    
    /* blog-show */
    .showArticle{margin: 0 14em;}
    .showArticle h1{font-size: 2.5em;}
}

/*Medium Desktop*/
@media screen and (max-width:1000px){
    .showArticle{margin: 0 8em;}
    .showArticle h1{font-size: 2.25em;}
    .blogSmallImage{width: 35em; height: 22em; margin:.75em;}
    .blogSmallImageTall{width:35em; height: 35em;}
}

/*Small desktop*/
@media screen and (max-width:800px){
    /* blog-show */
    .showArticle{margin: 0 5em;}
    .showArticle h1{font-size: 2em;}
    .showArticleMain p{font-size: 1em; margin:.75em 0;}
    .showArticleMain a{font-size: 1em;} 
    .blogSmallImage{width: 30em; height: 20em; margin:.5em;}
   .blogSmallImageTall{width:30em; height: 30em;}
   .credit h6{font-size:.75em;}
   .back button{margin: 1.25em;}
}

/*Tablet*/
@media screen and (max-width:600px){
    .card__image{width:18em; height:12em;}
    .card{width:18em;}
    .card__body h4{font-size:1.2em;}
    .card__body p, .blogMore{font-size: .85em;} 
    /* blog-show */
    .showArticle{margin: 0 2em;}
    .showArticle h1{font-size: 1.5em;}
    .date{font-size: 0.35em;}
    .showArticleMain h3{padding: 0.5em 0;}
    .showArticleMain p{font-size: .75em; margin:.5em 0;}
    .blogSmallImage{width: 18em; height: 12em; margin:.5em;}
   .blogSmallImageTall{width:18em; height: 18em;}
   .credit h6{font-size:.5em;}
   .back button{margin: 1em;}
}

/*mobile*/
@media screen and (max-width:375px){
    .cardBody{margin:1.5em; font-weight: 100;}
    .tag{font-size: .35em;}
    .card__body h4{font-size:1em;}
    .card__body p, .blogMore{font-size: .75em;}
}