.grid-main-container {
  
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}


.mid-content{
    position: relative;
    top: 7rem;
    /* grid-area: mid-content; */
    margin-top: 1rem;
    background: rgb(250, 248, 248);
    padding: 1rem;
}

.mid-content img{
    max-width: 100%;
}
.mid-content h1{
    text-transform: capitalize;
    margin-bottom: .2;
    color: #393838;
}


.mid-content h2 {
    color: black;
    font-size: .8rem;
    opacity: .7;
    margin-bottom: .7rem;
}


.mid-content i{
    font-weight: bold;
    text-transform: capitalize;
}

.mid-content p{
    color: #131311;
}




@media screen and (max-width: 550px) {
body


    .grid-main-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas:
            'navbar navbar'
            'left-side-article left-side-article'
            'right-side-article right-side-article'
            'middle-article middle-article'
            'template-cards template-cards'
        ;
    }

    .right-side-article {
        margin-top: 0;
    }

    /* .left-side-article #article h1 {
    font-size: clamp(38px, 2vw, 90px);
} */

    .mid-content {
        width: 100%;
    



}
}