From 13e3d637a30cecff64295678afb2dd8f46409567 Mon Sep 17 00:00:00 2001
From: Sarah Vaupel <vaupel.sarah@campus.lmu.de>
Date: Mon, 23 Dec 2019 16:46:43 +0100
Subject: [PATCH] style(legal): two-column layout

---
 frontend/src/app.sass  |  4 ++++
 templates/legal.hamlet | 33 +++++++++++++++++----------------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app.sass b/frontend/src/app.sass
index da9f3bee8..9b842f8a2 100644
--- a/frontend/src/app.sass
+++ b/frontend/src/app.sass
@@ -205,10 +205,14 @@ h4
 @media (min-width: 426px)
   .main__content-body
     padding: 13px 20px
+    .two-columns
+      column-count: 1
 
 @media (min-width: 769px)
   .main__content-body
     padding: 20px 40px
+    .two-columns
+      column-count: 2
 
 .pseudo-focus
   outline: 5px auto var(--color-light)
diff --git a/templates/legal.hamlet b/templates/legal.hamlet
index 45ee9915e..19da4cf8d 100644
--- a/templates/legal.hamlet
+++ b/templates/legal.hamlet
@@ -1,20 +1,21 @@
 $newline never
-<section>
-  <h2 id="data-protection">
-    _{MsgMenuDataProt}
-  ^{dataProtection}
+<div .two-columns>
+  <section>
+    <h2 id="data-protection">
+      _{MsgMenuDataProt}
+    ^{dataProtection}
 
-<section>
-  <h2 id="terms-of-use">
-    _{MsgMenuTermsUse}
-  ^{termsUse}
+  <section>
+    <h2 id="terms-of-use">
+      _{MsgMenuTermsUse}
+    ^{termsUse}
 
-<section>
-  <h2 id="copyright">
-    _{MsgMenuCopyright}
-  ^{copyright}
+  <section>
+    <h2 id="copyright">
+      _{MsgMenuCopyright}
+    ^{copyright}
 
-<section>
-  <h2 id="imprint">
-    _{MsgMenuImprint}
-  ^{imprint}
+  <section>
+    <h2 id="imprint">
+      _{MsgMenuImprint}
+    ^{imprint}