From 42418f516428e00352887654f4f8e745d42fea85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= <oceanrdn@gmail.com>
Date: Wed, 20 Mar 2024 18:18:04 +0100
Subject: [PATCH] Consistency padding in middle resolutions

---
 packages/nextjs/app/_components/CommunityGrant.tsx  | 2 +-
 packages/nextjs/app/_components/CompletedGrants.tsx | 4 ++--
 packages/nextjs/app/_components/EcosystemGrants.tsx | 2 +-
 packages/nextjs/app/_components/HomepageHero.tsx    | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nextjs/app/_components/CommunityGrant.tsx b/packages/nextjs/app/_components/CommunityGrant.tsx
index 3576c47..f19123e 100644
--- a/packages/nextjs/app/_components/CommunityGrant.tsx
+++ b/packages/nextjs/app/_components/CommunityGrant.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 export const CommunityGrant = () => {
   return (
     <div id="communityGrants" className="bg-secondary">
-      <div className="container max-w-[90%] sm:max-w-md lg:max-w-7xl m-auto xl:pl-18 lg:pl-8 lg:pt-10 flex flex-col-reverse lg:flex-row gap-5 lg:gap-0 my-6 lg:my-0">
+      <div className="container max-w-[90%] sm:max-w-md lg:max-w-[90%] xl:max-w-7xl m-auto xl:pl-4 lg:pt-10 flex flex-col-reverse lg:flex-row gap-5 lg:gap-0 my-6 lg:my-0">
         {/* Left section(Title, desc and btn) */}
         <div className="my-4 lg:py-16 space-y-2 lg:max-w-[40%] flex flex-col items-center lg:items-start">
           {/* Title  */}
diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index 1c0ab37..73093a0 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -5,7 +5,7 @@ import { GrantData } from "~~/services/database/schema";
 
 const CompletedGrantCard = ({ title, description, askAmount, builder, link, completedAt }: GrantData) => {
   return (
-    <div className="w-72 md:w-[300px] bg-primary min-h-full rounded-2xl overflow-hidden shadow-lg">
+    <div className="w-72 md:w-[290px] bg-primary min-h-full rounded-2xl overflow-hidden shadow-lg">
       <div className="flex justify-between items-center bg-white py-3 px-4 text-sm">
         <div className="flex items-center">
           <Image src="/assets/eth-completed-grant.png" alt="ETH Icon" width={10} height={10} />
@@ -43,7 +43,7 @@ export const CompletedGrants = async ({ limit }: { limit?: number }) => {
 
   return (
     <div className="bg-customBlue">
-      <div className="container flex flex-col justify-center max-w-[95%] lg:max-w-7xl mx-auto py-12 lg:pt-20 lg:pb-28 gap-6">
+      <div className="container flex flex-col justify-center max-w-[90%] xl:max-w-7xl mx-auto py-12 lg:pt-20 lg:pb-28 gap-6 xl:px-4">
         <div className="self-center lg:self-start w-fit relative">
           <h2 className="text-3xl sm:text-4xl lg:text-5xl text-center lg:text-left font-ppEditorial">
             Completed grants
diff --git a/packages/nextjs/app/_components/EcosystemGrants.tsx b/packages/nextjs/app/_components/EcosystemGrants.tsx
index b8827ca..c19e5c0 100644
--- a/packages/nextjs/app/_components/EcosystemGrants.tsx
+++ b/packages/nextjs/app/_components/EcosystemGrants.tsx
@@ -40,7 +40,7 @@ export const EcosystemGrants = async () => {
   const ecosystemGrants = await getAllEcosystemGrants();
   return (
     <div>
-      <div className="container flex flex-col justify-center max-w-[90%] lg:max-w-7xl mx-auto py-12 lg:pt-20 lg:pb-28 lg:px-4 gap-6">
+      <div className="container flex flex-col justify-center max-w-[90%] xl:max-w-7xl mx-auto py-12 lg:pt-20 lg:pb-28 xl:px-4 gap-6">
         <div className="self-center lg:self-start w-fit relative">
           <h2 className="text-3xl sm:text-4xl lg:text-5xl text-center lg:text-left font-ppEditorial">
             Ecosystem impact grants
diff --git a/packages/nextjs/app/_components/HomepageHero.tsx b/packages/nextjs/app/_components/HomepageHero.tsx
index de418f6..3408afe 100644
--- a/packages/nextjs/app/_components/HomepageHero.tsx
+++ b/packages/nextjs/app/_components/HomepageHero.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 export const HomepageHero = () => (
-  <div className="container max-w-[90%] lg:py-12 py-0 lg:max-w-7xl m-auto pt-4 pb-8 xl:pl-18 lg:pl-8 flex flex-col-reverse lg:flex-row items-center justify-between gap-5 lg:gap-0">
+  <div className="container max-w-[90%] lg:py-12 py-0 xl:max-w-7xl xl:pl-4 m-auto pt-4 pb-8 flex flex-col-reverse lg:flex-row items-center justify-between gap-5 lg:gap-0">
     <div className="space-y-2 lg:max-w-[55%] flex flex-col items-center lg:items-start">
       <div className="relative">
         <h2 className="text-3xl md:text-4xl lg:text-6xl lg:leading-[1.2] text-center lg:text-left font-ppEditorial">