From d55e44e5e98e21df7de990d3bd6547dd509ba08c Mon Sep 17 00:00:00 2001
From: djordje vlaisavljevic <dzvlais@gmail.com>
Date: Sat, 11 Dec 2021 17:01:15 +0100
Subject: [PATCH] Switched product card frontend to CSS grid

https://github.com/TryGhost/Team/issues/1245
---
 core/frontend/src/cards/css/product.css | 30 ++++++++++---------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/core/frontend/src/cards/css/product.css b/core/frontend/src/cards/css/product.css
index ac5b982cd3..01659e5a99 100644
--- a/core/frontend/src/cards/css/product.css
+++ b/core/frontend/src/cards/css/product.css
@@ -1,14 +1,15 @@
 .kg-product-card-container {
-    display: flex;
     background: transparent;
     box-shadow: inset 0 0 0 1px rgb(124 139 154 / 25%);
     border-radius: 5px;
     flex-direction: column;
-    text-decoration: none;
     max-width: 550px;
     padding: 20px;
-    width: 100%;
     align-items: center;
+    display: grid;
+    width: 100%;
+    grid-template-columns: auto 100px;
+    gap: 16px;
 }
 
 .kg-product-card {
@@ -19,20 +20,11 @@
 }
 
 .kg-product-card-image {
-    margin-bottom: 1.6rem;
-}
-
-.kg-product-card-header {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    width: 100%;
+    grid-column: 1 / 3;
 }
 
 .kg-product-card-title-container {
-    flex: 2 1 250px;
+    grid-column: 1 / 2;
 }
 
 .kg-product-card-title {
@@ -48,8 +40,7 @@
     font-size: 1em;
     line-height: 1.4em;
     opacity: .7;
-    margin-top: 8px;
-    width: 100%;
+    grid-column: 1 / 3;
 }
 
 .kg-product-card-description p+p {
@@ -58,20 +49,23 @@
 
 .kg-product-card-button {
     width: 100%;
-    margin-top: 16px;
+    grid-column: 1 / 3;
 }
 
 .kg-product-card-rating {
     display: flex;
     align-items: center;
     flex: 0 0 100px;
+    grid-column: 2 / 3;
+    align-self: start;
+    justify-self: end;
 }
 
 .kg-product-card-rating-star {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 32px;
+    height: 28px;
     width: 20px;
 }