@media(max-width:800px){
    .main-nav .container{
        display: grid;
        grid-template-columns: 2fr 2fr;
    }
    .nav-item ul li a{
        padding: 0.50rem;
        font-size: 20px;
    }
}
@media(max-width:500px){
    .main-nav .container{
        display: grid;
        grid-template-columns: auto;
    }
    #main-nav .logo{
        font-size: 18px;
        width: 150px;
    }
}
@media(max-width:672px){
     .category{
        display: inline-block;
        color: white;
        font-size: 0.5rem;
        text-transform: uppercase;
        padding: 0.6rem 0.7rem;
        border-radius: 15px;
        margin-bottom: 0.5rem;
        text-align: center;
        justify-content: center;
    } 
     .showcase-content h1{
        font-size: 1rem;
    } 
    .btn{
        display: inline-block;
        border: none;
        background: var(--dark-color);
        color: white;
        padding: 0.3rem 0.6rem;
        margin-top:17px ;
    }
    .btn-light{
        background: var(--light-color);
    }
    .btn-primary{
        background: var(--primary-color);
    }
    .btn-secondary{
        background: var(--seconday-color);
    }
    .btn:hover{
        opacity: 0.9;
    }
    .btn-block{
        display: block;
        width:100%;
        text-align: center;
    }
    .showcase{
        color: white;
        background: #333;
        padding: 0.3rem;
        position: relative;
    }
    .showcase .showcase-container{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        justify-content: center;
        align-items: center;
        height: 60vh;
    }
    .showcase-content{
        z-index: 1;
    }
    
}
@media(max-width:290px){
    .showcase-content h1{
        font-size: 1rem;
    }
    .showcase-content  p{
        font-size: 1rem;
        line-height:1;
    }
    .showcase{
        color: white;
        background: #333;
        padding: 0.4rem 0px;
        position: relative;
    }
    .container{
        margin: 0rem 0rem;
    }
}


/* home articles */

@media(max-width:840px){
    #home-articles .articles-container{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 1rem;
        background: rgb(233, 229, 229);
    }
     
    
    .card{
        display: grid;
        grid-template-rows: repeat(4,0.1fr);
         
    }
    .category{
        margin-top: 20px;
        margin-bottom: 15px;
        width: 150px;
    }
    .card h3 a{
        color: #333;
    }
}

@media(max-width:550px){
    #home-articles .articles-container{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-gap: 1rem;
        background: rgb(233, 229, 229);
    }
     
    
    .card{
        display: grid;
        grid-template-rows: repeat(4,0.1fr);
         
    }
    .category{
        margin-top: 20px;
        margin-bottom: 15px;
        width: 150px;
        font-size: 0.8rem;
    }
    .card h3 a{
        color: #333;
    }
}
@media(max-width:672px){
    .category{
        margin-top: 20px;
        margin-bottom: 15px;
        width: 150px;
        font-size: 0.8rem;
    }
}

@media(max-width:290px){
    .card img{
        width: 150px;
        height: 100px;
    }
    .card p{
        font-size: 0.9rem;
    }
}