From 19438d6a197d3dfbcdc7fd2525751b403d6ef91d Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <spamfree@matthieubessat.fr>
Date: Tue, 4 Aug 2020 17:28:44 +0200
Subject: [PATCH] fix: pricing style adjustements

---
 assets/development/styles/organization.css | 34 +++++++++++++++++++---
 views/organization.twig                    |  2 +-
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/assets/development/styles/organization.css b/assets/development/styles/organization.css
index 5b94608..0917583 100644
--- a/assets/development/styles/organization.css
+++ b/assets/development/styles/organization.css
@@ -442,11 +442,13 @@ section {
 .pricing {
   display: flex;
   justify-content: center;
+  margin-bottom: -1em;
 }
 
 .pricing-card {
+  min-width: 10em;
   max-width: 14em;
-  height: 10em;
+  min-height: 10em;
   width: 100%;
   padding: 1.5em 1em;
   text-align: center;
@@ -454,9 +456,10 @@ section {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  margin-right: 1.5em;
   color: white;
   background-color: rgba(253, 110, 11, .780);
+  margin-right: 1.5em;
+  margin-bottom: 1em;
 }
 
 .pricing .pricing-card:nth-child(1) {
@@ -483,6 +486,10 @@ section {
   font-size: 1.8em;
 }
 
+.pricing-description {
+  opacity: 0.9;
+}
+
 /* *****************************************************************************
 
 *                                    CONTACT                                    
@@ -495,9 +502,10 @@ section {
 }
 
 .contact-item {
-  display: flex;
   justify-content: space-between;
   align-items: center;
+  display: grid;
+  grid-template-columns: 2.5em 1fr;
   padding-top: .75em;
   padding-bottom: .75em;
   padding-left: 2em;
@@ -697,6 +705,9 @@ RESPONSIVE
   .media-modal {
     width: 70%;
   }
+  .pricing {
+    flex-wrap: wrap;
+  }
 }
 
 
@@ -793,10 +804,25 @@ RESPONSIVE
     flex-direction: column;
     align-items: center;
   }
+  
+  .pricing.dense {
+    flex-direction: row;
+  }
+
+  .pricing.dense .pricing-card {
+    min-height: 6em;
+    margin-right: .5em;
+    margin-left: .5em;
+    padding: 1em;
+  }
+
+  .pricing.dense .pricing-name {
+    font-size: 1.2em;
+  }
 
   .pricing-card {
+    margin-left: 0;
     margin-right: 0;
-    margin-bottom: 1em;
   } 
 
   .org-container {
diff --git a/views/organization.twig b/views/organization.twig
index 2113416..b8e0355 100644
--- a/views/organization.twig
+++ b/views/organization.twig
@@ -154,7 +154,7 @@
       <h2>Tarifs</h2>
       <div class="section-divider"></div>
     </div>
-    <div class="pricing">
+    <div class="pricing {% if data.pricing|length > 3 %}dense{% endif %}">
       {% for item in data.pricing %}
       <div class="pricing-card">
         <div class="pricing-label">