li{
    display: block;
}

.items-container{
    margin-top:130px;
    margin-bottom:2rem;
}

.item-list{
    display:flex;
    flex-direction: column;
    gap:1rem;
}

.item{
    display: flex;
    width:99%;
    margin:auto;
}

.item-image{
    height:150px;
    width:auto;
    aspect-ratio: 6 / 4;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    object-fit:cover;
}

.pictures{
    aspect-ratio: 6 / 4;
    object-fit:cover;
}


.item-info{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
    background-color: #1f1f1f;
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap:1rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.order-btn{
    margin-top:.5rem;
    border:none;
    padding: .5em 1em;
    background-color: rgb(253, 58, 58);
    color:whitesmoke;
    border-radius:.5em;
    cursor:pointer;
}

.order-btn:hover{
    background-color: rgb(233, 42, 42);
}

.item-title{
    font-size:1.1rem;
    font-weight: bold;
    color: white;
}

.item-price{
    font-size:0.9rem;
    color:#777;
}

.item-desc{
    margin-top:5%;
    font-size:0.8rem;
    color: rgb(93, 93, 93);
    font-weight: 100;
}


@media only screen and (max-width: 500px) {
    .item-image{
        height:120px;
    }
    .item-info{
        gap:.5rem;
    }
}

.info-btn{
    border:none;
    color:grey;
    font-size:0.75em;
    background-color: inherit;
    cursor:pointer;
}