rezept line adaption

app/styles/app.css

   flex-direction: row;
 }
 
+.resultsRezept {
+  display: flex;
+  
+  flex-direction: row;
+  width: 100%;
+}
+
+.resultsRezept li {
+  list-style: none;
+  padding: 10px 15px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+
 .results li {
   list-style: none;
   padding: 10px 15px;
   flex-basis: 50%;
   font-weight: 300;
   font-style: italic;
-  white-space: pre-wrap ;
+  white-space: pre-wrap;
   text-align: center;
+  flex: auto;
+  list-style-type: none;
 }
+
 .rezept .detail h3 h4{
   text-align: center;
 }
   justify-content: space-between;
   flex-wrap: wrap;
   align-content: space-around;
+  text-align: center;
+  align-items: center;
+}
+
+.kategorie.resultsRezept 
+{
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
 }
 
 .kategorie h3 {

app/templates/rezepte.hbs

   <LinkTo @route="rezepte" class="button">Rezepte bearbeiten</LinkTo>
 </Jumbo>
 
-<Kategorie @titel={{"Pasta"}}>
+<Kategorie  @titel={{"Pasta"}}>
   <div class="rentals">
-    <ul class="results">
+    <ul class="resultsRezept">
       {{#each @model as |rezept|}}
         {{#if (compare rezept.kategorie '===' 'Pasta')}}
-          <li><Rezept class="detail" @rezept={{rezept}} /></li>
+          <li><Rezept @rezept={{rezept}} /></li>
         {{/if}}
       {{/each}}
     </ul>