From 7618cd4b5ab7f0350b0651143b4aa8403bbbb7b9 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@hebeler.club>
Date: Fri, 14 Apr 2023 21:14:26 +0200
Subject: [PATCH] fixed hero layout

---
 pass/public/styles/index.less                | 15 ++++++++++++---
 pass/public/styles/key/checkout-payment.less |  2 ++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/pass/public/styles/index.less b/pass/public/styles/index.less
index 0908704..8279e32 100644
--- a/pass/public/styles/index.less
+++ b/pass/public/styles/index.less
@@ -46,6 +46,7 @@ html {
       display: grid;
       place-items: center;
       grid-template: "1fr 1fr" "1fr 1fr";
+      font-size: clamp(1rem, 2vw, 1.2rem);
 
       > li::before {
         content: "✓";
@@ -112,16 +113,16 @@ html {
     }
 
     @media (max-width: @breakpoint-hero-medium) {
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: 25ch 1fr;
       grid-template-rows: auto auto auto auto;
       grid-template-areas: "search-logo search-logo" "heading heading" "text list" "call-to-action list";
 
       > h1 {
         text-align: center;
+        font-size: clamp(1.2rem, 3vw, 1.7rem);
       }
 
       > ul {
-        grid-template: "1fr" "1fr" "1fr" "1fr";
         padding: 1rem;
 
         > li {
@@ -139,6 +140,13 @@ html {
         padding: 0 1rem 3rem 1rem;
       }
     }
+
+    @media (max-width: 670px) {
+      > ul {
+        grid-template: "1fr" "1fr" "1fr" "1fr";
+        padding: 1rem;
+      }
+    }
   }
 
   @media (max-width: @breakpoint-hero-small) {
@@ -159,7 +167,8 @@ html {
       }
 
       > ul {
-        gap: 0.5rem;
+        gap: 1rem;
+        grid-template: "1fr 1fr" "1fr 1fr";
         padding: 1rem 0;
       }
 
diff --git a/pass/public/styles/key/checkout-payment.less b/pass/public/styles/key/checkout-payment.less
index ad16b00..900f316 100644
--- a/pass/public/styles/key/checkout-payment.less
+++ b/pass/public/styles/key/checkout-payment.less
@@ -100,6 +100,8 @@
     }
   }
   #revocation-container {
+    display: grid;
+    gap: 1rem;
     margin: 1rem 0;
   }
   #paypal-payment-card #paypal-card-form {
-- 
GitLab