From 8211ba7a6b273206e95c16ec12c31f9ca5434014 Mon Sep 17 00:00:00 2001
From: Nonimart <martinon.toinou@protonmail.com>
Date: Tue, 16 Sep 2025 14:01:44 +0200
Subject: [PATCH] RESPONSIVE FIX refining responsivity

---
 resources/css/components/post-header.css | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/resources/css/components/post-header.css b/resources/css/components/post-header.css
index 53b0cf1..b9a84ab 100644
--- a/resources/css/components/post-header.css
+++ b/resources/css/components/post-header.css
@@ -1,5 +1,5 @@
 .post-header {
-  @apply bg-primary text-white py-32;
+  @apply bg-primary text-white py-32 px-2 lg:px-4 md:px-8;
 
   h1.post-header__title,
   h2.post-header__title {
@@ -7,10 +7,13 @@
     line-height: 1.2;
   }
   &__inner {
-    @apply container mx-auto  grid  gap-24;
+    @apply mx-auto  grid  gap-24;
+    @screen xl {
+      @apply container;
+    }
     &--has-thumbnail {
       @screen lg {
-        grid-template-columns: 1fr 4fr;
+        grid-template-columns: 4fr 1fr;
       }
     }
     &--no-thumbnail {
@@ -21,9 +24,14 @@
     @apply bg-white text-primary;
   }
   .thumbnail-wrapper {
-    @apply order-2 lg:order-1 relative z-20;
-    aspect-ratio: 4/5;
+    @apply order-2 lg:order-1 relative z-20 h-fit;
     padding: 1.2rem;
+    /* max-width: calc(70% - 40px);
+    @apply mx-auto; */
+
+    @screen lg {
+      transform: translateX(-40px);
+    }
 
     &:before {
       content: '';
@@ -31,8 +39,9 @@
     }
 
     img {
+      aspect-ratio: 4/5;
       /* max-height: 200px; */
-      @apply w-full h-full relative z-10;
+      @apply max-h-[200px] lg:max-h-full w-full h-full relative z-10;
       @apply object-cover;
       /* width: calc(100% - 2rem);
       height: calc(100% - 2rem);