/* MEDIA QUERIES HEADER*/

@media only screen and (max-width: 600px) {
    .navbar .menubar {
        display: block;
        grid-column: 11 / 12;
        font-size: 2em;
        cursor: pointer;
    }

    .navbar .menu{
        position: absolute;
        width: 100%;
        height: 70vh;
        display: grid;
        align-items: center;
    }

    .nav{
        display: none;
    }

    .mobile-nav{
        display: flex;
    }

}

/* crea el menu desplegable, margin-top es para moverlo, translateX lo saca dela pantalla
.navbar .menu {
position: absolute;
width: 100%;
height: 50vh;
display: grid;
align-items: center;
background-color: grey;
margin-top: 30em;
transform: translateX(150%);
}  */



/* ------- MEDIA QUERIES Mobile -------- */
@media (max-width:768px) {
    main {
        grid-template:
            "back" 50px
            "main_img" 190px
            "description"
            "color" 180px
            "price" 245px;
    }

    main .main_img img {
        height:170px;
        width: auto;
    }

    .deliver{
        padding-top: 20px;
    }

    footer {
        flex-direction: column;
    }
    
    .socialmedia_icons{
        justify-content: center;
        padding-bottom: 10px;
    }
    .language_links{
       
        flex-direction: column-reverse;
        gap: 10px;
    }

    .flag_spain{
        display: flex;
        flex-direction: row-reverse;
        gap: 10px;
    }

}

/* ------- MEDIA QUERIES Tablet -------- */
@media (min-width:768px) {
    main {
        grid-template:
            [back-left] "back back" 50px [back-right]
            [main_img-left] "main_img main_img" 350px [main_img-right]
            [description-left] "description description"  [description-right]
            [color-left] "color price" 270px [color-right]
            / 1fr 400px;
    }

    .socialmedia_icons{
        margin: 0px 100px 0px 10px; /* coordinates 0top, 0right, 0bottom, 0left */
    }
}

/* ------- Mobile & Tablet -------- */
@media (max-width:992px) {
    main .back {
        padding-top: 25px;
    } 

    main .main_img {
        align-items: center;
    }

    main .side_imgs{
        display: none;
    }


}


/* ------- Desktop -------- */
@media (min-width:992px) {
    main {
        grid-template:
            [back-left] "back back" 70px [back-right]
            [description-left] "main_img description" 225px [description-right]
            [color-left] "main_img color" 180px [color-right]
            [price-left] "main_img price" 270px [price-right]
            / 1fr 400px;
    }

    main .back {
        padding-top: 50px;
    }

    main .main_img {
        margin-right: 20px;
        display: flex;
    }

    main .main_img .inner_img {
        height: 500px;
        width: 100%;
    }

    .socialmedia_icons{
        margin: 0px 100px 0px 200px; /* coordinates 0top, 0right, 0bottom, 0left */
    }
}