From 98dda51654a1df788e07c18a9cd5be1d051716f8 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Thu, 26 Sep 2024 18:44:01 +0200
Subject: [PATCH] Update grids

---
 partials/imagegrid-end.htm   | 19 ++++++++-----------
 partials/imagegrid-start.htm | 24 +++++++++++++++++++++---
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/partials/imagegrid-end.htm b/partials/imagegrid-end.htm
index e6d648f..52bf2a2 100644
--- a/partials/imagegrid-end.htm
+++ b/partials/imagegrid-end.htm
@@ -1,12 +1,9 @@
         </div>
-    </div>
-    <div class="lg:col-span-3">
-        <div class="relative" style="
-            --polygon: 76% 4%, 100% 0, 100% 100%, 66% 95%, 29% 96%, 0 100%, 6% 44%, 3% 8%, 34% 1%;
-            --polygonmobile: 0 0, 65% 7%, 100% 0, 100% 100%, 29% 93%, 0 100%;
-        ">
-            <div class="absolute w-[calc(100%+10px)] h-[calc(100%+20px)] top-[-10px] left-[-10px] md:meft-0 bg-neutral-800 clip-path-polygon-[var(--polygonmobile)] lg:clip-path-polygon-[var(--polygon)]"></div>
-            <img src="{{image | media }}" class="w-full h-[60vh] lg:h-[80vh] object-cover clip-path-polygon-[var(--polygonmobile)] lg:clip-path-polygon-[var(--polygon)]" alt="{{ alt }}" />
-        </div>
-    </div>
-</div>
+    </main>
+    <aside class="lg:col-span-3">
+        <figure class="relative">
+            <div class="absolute w-full lg:w-[calc(100%+10px)] h-[calc(100%+20px)] top-[-10px] bg-neutral-800"></div>
+            <img src="{{image | media }}" class="w-full h-[60vh] lg:h-[80vh] object-cover" alt="{{ alt }}" />
+        </figure>
+    </aside>
+</section>
diff --git a/partials/imagegrid-start.htm b/partials/imagegrid-start.htm
index a3f7c8d..52ec638 100644
--- a/partials/imagegrid-start.htm
+++ b/partials/imagegrid-start.htm
@@ -1,4 +1,22 @@
-<div class="grid lg:grid-cols-5 items-center">
-    <div class="lg:col-span-2 row-start-2 lg:row-start-auto w-[calc(100%-3rem)] sm:w-96 lg:max-w-none lg:w-full mx-auto lg:py-8 lg:pl-10">
-        <div class="prose prose-invert prose-lg bg-neutral-800 p-8 rounded-b-xl lg:rounded-b-0 rounded-l-0 lg:rounded-l-xl max-w-none pt-[12vw] lg:pt-8 mt-[-10vw] lg:mt-0 lg:mr-[-4vw] pr-[4vw] [&>h2]:text-xl md:[&>h2]:text-xl xl:[&>h2]:text-[1.8vw]">
+<section class="grid lg:grid-cols-[1fr_repeat(3,9%)_1fr] items-center lg:[&:nth-child(even)_aside]:col-start-1 lg:[&:nth-child(even)_main]:col-start-4 lg:[&:nth-child(even)>*]:row-start-1
+[&_figure>*]:clip-path-polygon-[var(--polygonmobile)] lg:[&_figure>*]:clip-path-polygon-[var(--polygon)]
+lg:[&:nth-child(even)_figure>*]:clip-path-polygon-[var(--polygonOdd)]
+lg:[&:nth-child(even)_figure>div]:right-[-10px]
+lg:[&:nth-child(odd)_figure>div]:left-[-10px]
+
+lg:[&:nth-child(odd)_main>div]:mr-[-4vw] lg:[&:nth-child(odd)_main>div]:pr-[8vw]
+lg:[&:nth-child(even)_main>div]:ml-[-4vw] lg:[&:nth-child(even)_main>div]:pl-[8vw]
+lg:[&:nth-child(odd)_main>div]:rounded-l-xl lg:[&:nth-child(even)_main>div]:rounded-r-xl
+
+lg:[&:nth-child(odd)_main]:pl-10
+lg:[&:nth-child(even)_main]:pr-10
+"
+ style="
+            --polygon: 8% 0, 100% 0%, 100% 100%, 8% 100%, 0% 50%;
+            --polygonOdd: 92% 0, 100% 50%, 92% 100%, 0 100%, 0 0;
+            --polygonmobile: 0 0, 65% 7%, 100% 0, 100% 100%, 29% 93%, 0 100%;
+        "
+>
+    <main class="lg:col-span-2 row-start-2 lg:row-start-auto w-[calc(100%-3rem)] sm:w-96 lg:max-w-none lg:w-full mx-auto lg:py-8">
+        <div class="prose prose-invert prose-lg bg-neutral-800 p-8 rounded-b-xl lg:rounded-b-0 rounded-l-0 max-w-none pt-[12vw] lg:pt-8 mt-[-10vw] lg:mt-0 [&>h2]:text-xl md:[&>h2]:text-xl xl:[&>h2]:text-[1.8vw]">
             <h2 class="text-center lg:text-left">{{heading}}</h2>