working on offer card

src/public/css/offers.css

@@ -31,6 +31,12 @@
     flex-shrink: 0;
     margin-left: 5%;
   }
+
+  .myoffer-card {
+    width: 100%;
+    height: 500px;
+    margin: 5px 5px;
+  }
 }
 
 @media (min-width: 769px) {
@@ -65,6 +71,14 @@
     flex-shrink: 0;
     margin-left: 20%;
   }
+
+  .myoffer-card {
+    width: 23%;
+    min-width: 400px;
+    height: 500px;
+    margin: 10px 10px;
+  }
+
 }
 
 #create-offer-root {
@@ -85,16 +99,53 @@
   margin-right: auto;
 }
 
-.myoffer-card {
-  text-align: start;
-  margin-top: 5px;
-  margin-bottom: 5px;
+#own-offers-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
 }
 
-.myoffer-card > div {
-  max-width: 200px;
-  display: inline-block;
-  padding: 5px;
+.myoffer-card {
+  display: grid;
+  grid-template-columns: 46% 8% 46%;
+  grid-template-rows: 23% 1% 18% 1% 18% 1% 18% 1% 20%; 
+}
+
+.trade-desc {
+  grid-column: 1;
+  grid-row: 1;
+  text-align: left;
+}
+
+.trade-desc > p {
+  margin: 0;
+}
+
+.offer-card-content-title {
+  color: gray;
+  font-size: 0.8em;
+  font-weight: 100;
+}
+
+.offer-card-content-data {
+  font-size: 1.1em;
+  font-weight: bold;
+}
+
+.premium-desc {
+  grid-column: 3;
+  grid-row: 1;
+  text-align: right;
+}
+
+.premium-desc > p {
+  margin: 0;
+}
+
+.where-desc {
+  grid-column: 1;
+  grid-row: 3;
+  text-align: left;
 }
 
 #create-offer-controls {