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 @@

Tarifs

-
+
{% for item in data.pricing %}