/* 992px */
@media screen and (max-width:992px){
    /* Main content (Desktops) */
    .main_content .section{
        overflow-x: auto;
        padding-left: 1.5rem;
        padding-right: 1rem;
    }
}

/* 850px */
@media screen and (max-width:850px){
    /* Posts */
    .main_content .section{
        grid-template-columns: repeat(3,12rem);
    }
}

/* Mobile and tablet design */

/* 768px */
@media screen and (max-width:768px){
    /*Desktop container*/
    .desktop_container{
        display: none;
    }

    /* Mobile and tablet design */
    .container{
        display: block;
    }
    /* Posts  */
    .container .main .post_contents #video2{
        grid-row: 3/5;
        grid-column: 3/4;
    }
}

/* 576px */
@media screen and (max-width:576px){
    /* Searchbox */
    .container .header form input[type='text']{
        padding: 1rem 3rem;
    }
    .container .header form svg{
        top: 1.5rem;
    }

    /* Posts  */
    .container .main .post_contents {
        grid-template-columns: repeat(3,10.3rem);
    }

    /* Footer */
    .footer_profile img {
        margin-right: 1rem;
    }
}

/* 480px */
@media screen and (max-width:480px){
    /* Container */
    .container{
        padding: 0.5rem;
    }

    /* Header and searchbox */
    .container .header form input[type='text'] {
        padding: 0.5rem 2.5rem;
    }
    .container .header form input[type='text']::placeholder{
        font-size: 1rem;
    }
    .container .header form svg {
        top: 1.25rem;
        width: 25px;
        height: 25px;
    }

    /* Posts  */
    .container .main .post_contents {
        gap: 0.1rem;
        padding-bottom: 1rem;
        grid-template-columns: repeat(3,8.3rem);
        grid-template-rows: repeat(4,9rem);
    }

    /* Footer */
    .footer_profile img{
        margin-right: 2rem;
    }
}
/* 400px */
@media screen and (max-width:400px){
    /* Header and searchbox */
    .container .header form svg {
        top: 0.9rem;
        left: 1.2rem;
        width: 20px;
        height: 20px;
    }
    .container .header form input[type='text']::placeholder{
        font-size: 0.8rem;
    }

    /* Posts  */
    .container .main .post_contents {
        gap: 0.1rem;
        padding-bottom: 1rem;
        grid-template-columns: repeat(3,7.8rem);
        grid-template-rows: repeat(4,9rem);
    }
}