From 518ae3aba3a8f49a5052f54bb70f13128cfe75a8 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <gpg@kogakure.8shield.net>
Date: Wed, 11 Sep 2024 16:34:05 +0200
Subject: [PATCH] fix: broken grids on project page

---
 src/components/Image.astro            |  2 +-
 src/components/ProjectContainer.astro | 16 ++++++++--------
 src/components/ProjectImage.astro     |  3 ++-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/Image.astro b/src/components/Image.astro
index 7d77768..ccdd37d 100644
--- a/src/components/Image.astro
+++ b/src/components/Image.astro
@@ -6,7 +6,7 @@ const { class: className, noMargin, src, ...props } = Astro.props;
 <div
 	class:list={[
 		'image-shadow mbe-10 mbs-0 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none',
-		{ 'mbe-0': noMargin },
+		{ '!mbe-0': noMargin },
 		className,
 	]}
 >
diff --git a/src/components/ProjectContainer.astro b/src/components/ProjectContainer.astro
index 61f76bf..63160cf 100644
--- a/src/components/ProjectContainer.astro
+++ b/src/components/ProjectContainer.astro
@@ -50,13 +50,13 @@ const {
 	{
 		format === '70-start' && (
 			<figure
-				class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap"
+				class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap"
 				{...animation}
 			>
-				<div class="col-start-1 col-end-19 grid self-start xl:col-end-13">
+				<div class="col-start-1 col-end-19 xl:col-end-13">
 					<ProjectImage project={project} />
 				</div>
-				<figcaption class="col-start-2 col-end-18 xl:col-start-13">
+				<figcaption class="col-start-2 col-end-18 md:col-start-10 xl:col-start-14 xl:col-end-18">
 					<ProjectContent project={project} />
 				</figcaption>
 			</figure>
@@ -65,13 +65,13 @@ const {
 	{
 		format === '70-end' && (
 			<figure
-				class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap"
+				class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap"
 				{...animation}
 			>
-				<div class="col-start-1 col-end-19 row-start-1 grid self-start xl:col-start-7 xl:col-end-19">
+				<div class="col-start-1 col-end-19 grid xl:col-start-7">
 					<ProjectImage project={project} />
 				</div>
-				<figcaption class="col-start-2 col-end-18 xl:col-start-2 xl:col-end-7">
+				<figcaption class="col-start-2 col-end-18 md:col-end-10 xl:col-end-6 xl:row-start-1">
 					<ProjectContent project={project} />
 				</figcaption>
 			</figure>
@@ -80,7 +80,7 @@ const {
 	{
 		format === '100-start' && (
 			<figure
-				class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap"
+				class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-y-halfgap"
 				{...animation}
 			>
 				<div class="col-start-1 col-end-19 row-start-1">
@@ -95,7 +95,7 @@ const {
 	{
 		format === '100-end' && (
 			<figure
-				class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap"
+				class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-y-halfgap"
 				{...animation}
 			>
 				<div class="col-start-1 col-end-19 row-start-1">
diff --git a/src/components/ProjectImage.astro b/src/components/ProjectImage.astro
index 8079a2a..8a227de 100644
--- a/src/components/ProjectImage.astro
+++ b/src/components/ProjectImage.astro
@@ -13,13 +13,14 @@ const { project } = Astro.props;
 {
 	project.data.image &&
 		(project.data.image.src.includes('.svg') ? (
-			<div class="image-shadow mbe-10 mbs-0">
+			<div class="image-shadow mbe-0 mbs-0">
 				<img class="image-border" alt={project.data.title} src={project.data.image.src} />
 			</div>
 		) : (
 			<Image
 				alt={project.data.title}
 				class="[&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
+				noMargin
 				src={project.data.image.src}
 			/>
 		))