/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/

@media (min-width: 1200px){

}

@media (min-width: 992px) and (max-width:1199px){
    .blog-card{
        margin-left:6rem;
    }
}

@media (min-width: 768px) and (max-width:991px){
}

@media (min-width: 576px) and (max-width:768px){
    .blog-card{
        margin-left:6rem;
    }

    .display-5{
        font-size: 2rem;
    }

    .header-dscr{
        font-size:0.9rem;
    }

    .blogs-header .header-cap-sub{
        top:90%;
        transform: translateY(-90%);
    }
}

@media (min-width: 400px) and (max-width:575px){
    .blog-card{
        margin-left:6rem;
    }

    .display-5{
        font-size: 1.5rem;
    }

    .header-dscr{
        font-size:0.9rem;
    }

    .blogs-header .header-cap-sub{
        top:96%;
        transform: translateY(-96%);
    }
}

@media (max-width:399px){
    .display-5{
        font-size: 1.3rem;
    }


    .header-dscr{
        font-size:0.9rem;
    }

    .blogs-header .header-cap-sub{
        top:96%;
        transform: translateY(-96%);
    }
}

@media (min-width: 330px) and (max-width: 360px){
    .blog-card{
        margin-left:10px;
    }

    .display-5{
        font-size: 1.2rem;
    }


    .header-dscr{
        font-size:0.8rem;
    }

    .blogs-header .header-cap-sub{
        top:96%;
        transform: translateY(-96%);
    }
}

@media (min-width:250px) and (max-width: 330px){
    .blog-card{
        max-width:90%;
        margin-left:10px;
    }

    .blog-card .title,
    .blog-card .description{
        font-size: 0.8rem;
    }
    .banner p{
        font-size:0.8rem;
    }


    .header-dscr{
        font-size:0.8rem;
    }

    .blogs-header .header-cap-sub{
        top:110%;
        transform: translateY(-110%);
    }
}

@media (max-width:259px){
    .blog-card{
        max-width:90%;
        margin-left:10px;
    }

    .blog-card .title,
    .blog-card .description{
        font-size: 0.7rem;
    }

    .banner p{
        font-size:0.8rem;
    }

    .header-dscr{
        font-size:0.9rem;
    }

    .blogs-header .header-cap-sub{
        top:96%;
        transform: translateY(-96%);
    }
}