/* TODO: improve user experiece doing more fluid (Layout shifter) the page*/

@media screen and (max-width: 260px){
    body {
      width: 130%;
    }
}

@media screen and (min-width: 550px){
    footer {
      padding: 5px !important;
      letter-spacing: 0.1rem !important;
    }

	.inside section{
		width: 65% !important;
	}

}



@media screen and (min-width: 300px) and (max-width: 549px){
    #restaurants-list li{
        width: 100%;
        padding: 5px 5px;
    }

    #restaurants-list li a{
        margin: 5px 0 0;
        padding: 5px 5px;
    }

    .restTitle , .restAddress {
        display: none;
    }

    #restaurant-container{
        width: 100%;
    }

    .restaurant-review-header{
        width: 100%;
        margin:0;
        padding: 0;
    }

    #reviews-container{
        width: 100%;
        margin:0;
        padding: 0;
    }

    #reviews-list li{
        width: 100%;
    }

    .inside #map{
        width: 100%;
    }

}



@media screen and (min-width: 1200px){
    #restaurants-list li{
    	width:30%;
    }

}

@media screen and (min-width: 1600px){
	#restaurants-list li{
		width: 20%;
	}
}