.items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: 'Open Sans';
    align-items: flex-start;
    flex-grow: 1;
}

.item {
    flex-basis: 5px;
    flex-grow: 1;
    flex-shrink: 0;
    margin-right: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px -2px black;
}

.item-name {
    background-color: #255;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}
.item-name > span {
    color: white;
    font-size: 17px;
}

.fact-line {
    background-color: #255;
}

.add-item {
    background-color: rgb(23, 56, 56);
    color: white;
    border-radius: 50%;
}

.fact-line {
    color: white;
    padding: 5;
    font-size: smaller;
}

.item-description {
   padding: 5px;
}

@media (max-width: 768px) {
    .item 
        {font-size: larger;
        flex-basis: 100%;
    }
    .items {
        flex-direction: column;
    }
}