/*Desktop container*/
.desktop_container{
    padding: 2rem 1rem;
    display: grid;
    grid-template-columns: min-content 3fr;
    height: 100dvh;
}

/* Main content */
.main_content{
    height: 100%;
    overflow-y: auto;
}
.main_content .section{
    display: grid;
    grid-template-columns: repeat(3,15rem);
    grid-template-rows: repeat(4,15rem);
    gap: 0.1rem;
    height: 100dvh;
    padding: 3rem 10rem;
}
.main_content .section img{
    width: 100%;
    height: 100%;
}
.main_content .section video{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#video1{
    grid-row: 1/3;
}
#video2{
    grid-row: 3/5;
    grid-column: 3/4;
}

/* Mobile and tablet elements */
.container{
    display: none;
    padding: 1rem 2rem;
}

/* Header searchbox */
.container .header form{
    display: flex;
    align-items: center;
}
/* Searchbox */
.container .header form input[type='text']{
    width: 100%;
    padding: 1.3rem 3rem;
    background-color: var(--clr-light-gray);
    border: none;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.container .header form input[type='text']:focus{
    outline: none;
}
.container .header form input[type='text']::placeholder{
    font-size: 1.2rem;
}
.container .header form svg{
    position: absolute;
    top: 1.8rem;
    left: 2.6rem;
    width: 30px;
    height: 30px;
    color: var(--clr-dark-gray);
}

/* Explore Posts */
.container .main .post_contents{
    overflow: auto;
    margin-top: 1rem;
    gap: 0.3rem;
    height: 100dvh;
    display: grid;
    grid-template-columns: repeat(3,14rem);
    grid-template-rows: repeat(4,15rem);
}
.container .main .post_contents img{
    width: 100%;
    height: 100%;
}
.container .main .post_contents video{
    object-fit: cover;
    width: 100%;
    height: 100%;
}