.grid-container{
    display:grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 2rem;
}

#main-blog-content{
    margin-top:2rem; 
}

#main-blog-content article{
    display:grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 2rem;
}

#main-blog-content article:nth-child(n+2){
    margin-top: 2rem;
}

article aside{
    text-align:left;
}

article figcaption{
    font-size: 75%;
    font-style: italic;
}

.blog-img-container{
    margin: 0.7rem;
    grid-row: span 2;
    /*border-radius: 10px;*/
}

.blog-img-container img{
    height: 300px;
    width: 99%; /*to account for the border around the img*/
    /* border: 0.1rem solid black; */
}

article h3{
    font-size: 90%;
}

figcaption{
    text-align:center;
}

.blog-content{
    padding: 0.7rem;
}

.blog-content div.btn-continue-reading{
    list-style-type: none;
    background: var(--main-nav-font-color);
    padding: 0.5rem;
    text-align:center;
    /* width:30%; */
    width: max(130px, 30%);
    margin-top: 1rem;
    color: var(--main-button-color);
}

.blog-content div.btn-continue-reading {
    cursor:pointer;
}

div.btn-continue-reading:hover{
    background: var(--main-nav-font-color-hover);
    /* cursor: pointer */
}

.blog-content ul li a{
    text-decoration: none;
    color: var(--main-button-color);
}

.blog-header {
    color: var(--main-blog-header-color);
    display: grid;
    grid-template-rows: repeat(2,1fr);
    grid-template-columns: 1fr;
    padding-left: 0.7rem;
}

.blog-header h2{
    color: black;
    font-size: 200%;
}

.blog-header-subheading{
    display:flex;
}

.blog-header-seperator{
    font-size: 100%;
    padding-left: 1rem;
}

.blog-header-tag{
    padding-left: 1rem;
}

article ul.user-btns{
    list-style-type: none;
    color: var(--main-nav-font-color);
    font-size: 130%;
    display:none;
    justify-content: left;
    margin-top: 1rem;
}

article ul.user-btns li:nth-child(2){
    padding-left: 2rem;
}

article ul.user-btns .user-btn img{
    height: 20px;
    width: 20px;
}

article ul.user-btns .user-btn img:hover{
    filter: brightness(75%);
}

article ul.user-btns .user-btn i:hover{
    filter: brightness(75%);
}

/* article ul.user-btns li:active, article ul.user-btns li:hover{
    font-weight: bold;
    cursor: pointer;
} */

article ul.user-btns li.user-btn:active, article ul.user-btns li.user-btn:hover{
    cursor: pointer;
}

/*to remove fixed positioning, comment out position and right properties and uncomment the float property. */
#aside-content{
    /* position:fixed;
    bottom: 8rem;
    top: 41rem; 
    right: 5rem; */
    margin-top: 2rem;
}

/* #recommended-blog-posts > h3, #featured-blog-post > h3{
    text-align:center;
} */

#recommended-nav ul {
    display:flex;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 2rem;
}

#recommended-nav ul li{
    background: var(--main-nav-font-color);
    color: var(--main-button-color);
    padding: 0.5rem;
    text-align:center;
    flex-grow:1;
    /* width:20%;
    float:left; */
}

#recommended-nav, .aside-content{
    margin-top: 1.5rem;
}

#recommended-nav ul li:hover{
    background: var(--main-nav-font-color-hover);
    cursor: pointer
}

#recommended-blog-posts #recommended-nav ul{
    list-style-type: none;
}

.aside-content, .featured-content{
    display: flex;
    /* grid-template-columns: 1fr 2fr; */
    column-gap: 2rem;
    /* justify-content: center; */
}

.aside-content-img img{
    height: var(--small-image-height);
    width:var(--small-image-width);
}

.aside-content-date{
    color: var(--main-blog-header-color);
}

#featured-blog-post{
    margin-top:2rem;
}

.featured-content{
    margin-top: 1rem;
}

.cutoff-text::before{
    content: "";
    position: absolute;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, white);
    height: calc(1em * var(--line-height));
    width: 100%;
}

.cutoff-text{
    display: -webkit-box;
    overflow: hidden;
    position: relative; 
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--max-lines);
}

@media (max-width: 1170px) {
    .grid-container{
        grid-template-columns: 1fr;
    }

    #aside-content {
        display: flex;
        justify-content: space-evenly;
        margin: 2rem 0;
    }

    #recommended-blog-posts{
        flex-grow: 0.5;
    }

    #featured-blog-post{
        margin-top: 0px;
    }
}
@media (max-width: 600px) {
    #main-blog-content article{
        display:flex;
        flex-direction: column;
        align-items: center;
    }

    .blog-img-container{
        width: fit-content;
        order: 2;
    }

    .blog-header{
        order: 1;
    }

    .blog-header h2{
        text-align: center;
    }

    .blog-content{
        order: 3
    }

    .blog-content ul{
        margin: .7rem auto;
    }

    .blog-body{
        text-align:center;
    }

    #aside-content {
        display: block;
        /* max-width:50%; */
    }

    .aside-content, .featured-content{
        justify-content: center;
    }

    article ul.user-btns{
        justify-content: space-around;
    }

    article ul.user-btns li:nth-child(2){
        padding-left: 0;
    }

    div.btn-continue-reading{
        margin: 1rem auto 0 auto;
    }

    #featured-blog-post{
        margin-top: 2rem;
    }

    #recommended-nav{
        max-width: 50%;
        margin: 1rem auto;
    }

    #recommended-nav ul{
        justify-content: center;
        flex-direction: column;
    }

    #recommended-nav ul li{
        margin-bottom: 2rem;
    }

    #recommended-blog-posts > h3, #featured-blog-post > h3{
        text-align:center;
    }
}