From a1867e14b0e5463e4bb222d438f4e2692610bbc6 Mon Sep 17 00:00:00 2001
From: Anant Jain <kumkumnidhi14@gmail.com>
Date: Thu, 14 Aug 2025 23:25:49 +0530
Subject: [PATCH] Updated padding from py-24 to py-12 and added xl:py-24 for
 various components in dark and light feature, footer, gallery, pricing,
 statistic, step, team, and testimonial sections to ensure uniformity in
 layout and spacing.

---
 src/blocks/blog/dark/a.js         | 2 +-
 src/blocks/blog/dark/b.js         | 2 +-
 src/blocks/blog/dark/c.js         | 2 +-
 src/blocks/blog/dark/d.js         | 2 +-
 src/blocks/blog/dark/e.js         | 2 +-
 src/blocks/blog/light/a.js        | 2 +-
 src/blocks/blog/light/b.js        | 2 +-
 src/blocks/blog/light/c.js        | 2 +-
 src/blocks/blog/light/d.js        | 2 +-
 src/blocks/blog/light/e.js        | 2 +-
 src/blocks/contact/dark/a.js      | 2 +-
 src/blocks/contact/dark/b.js      | 2 +-
 src/blocks/contact/dark/c.js      | 2 +-
 src/blocks/contact/light/a.js     | 2 +-
 src/blocks/contact/light/b.js     | 2 +-
 src/blocks/contact/light/c.js     | 2 +-
 src/blocks/content/dark/a.js      | 2 +-
 src/blocks/content/dark/b.js      | 2 +-
 src/blocks/content/dark/c.js      | 2 +-
 src/blocks/content/dark/e.js      | 2 +-
 src/blocks/content/dark/f.js      | 2 +-
 src/blocks/content/dark/g.js      | 2 +-
 src/blocks/content/dark/h.js      | 2 +-
 src/blocks/content/light/a.js     | 2 +-
 src/blocks/content/light/b.js     | 2 +-
 src/blocks/content/light/c.js     | 2 +-
 src/blocks/content/light/e.js     | 2 +-
 src/blocks/content/light/f.js     | 2 +-
 src/blocks/content/light/g.js     | 2 +-
 src/blocks/content/light/h.js     | 2 +-
 src/blocks/cta/dark/a.js          | 2 +-
 src/blocks/cta/dark/b.js          | 2 +-
 src/blocks/cta/dark/c.js          | 2 +-
 src/blocks/cta/dark/d.js          | 2 +-
 src/blocks/cta/light/a.js         | 2 +-
 src/blocks/cta/light/b.js         | 2 +-
 src/blocks/cta/light/c.js         | 2 +-
 src/blocks/cta/light/d.js         | 2 +-
 src/blocks/ecommerce/dark/a.js    | 2 +-
 src/blocks/ecommerce/dark/b.js    | 2 +-
 src/blocks/ecommerce/dark/c.js    | 2 +-
 src/blocks/ecommerce/light/a.js   | 2 +-
 src/blocks/ecommerce/light/b.js   | 2 +-
 src/blocks/ecommerce/light/c.js   | 2 +-
 src/blocks/feature/dark/a.js      | 2 +-
 src/blocks/feature/dark/b.js      | 2 +-
 src/blocks/feature/dark/c.js      | 2 +-
 src/blocks/feature/dark/d.js      | 2 +-
 src/blocks/feature/dark/e.js      | 2 +-
 src/blocks/feature/dark/f.js      | 2 +-
 src/blocks/feature/dark/g.js      | 2 +-
 src/blocks/feature/dark/h.js      | 2 +-
 src/blocks/feature/light/a.js     | 2 +-
 src/blocks/feature/light/b.js     | 2 +-
 src/blocks/feature/light/c.js     | 2 +-
 src/blocks/feature/light/d.js     | 2 +-
 src/blocks/feature/light/e.js     | 2 +-
 src/blocks/feature/light/f.js     | 2 +-
 src/blocks/feature/light/g.js     | 2 +-
 src/blocks/feature/light/h.js     | 2 +-
 src/blocks/footer/dark/a.js       | 2 +-
 src/blocks/footer/dark/b.js       | 2 +-
 src/blocks/footer/dark/c.js       | 2 +-
 src/blocks/footer/dark/e.js       | 2 +-
 src/blocks/footer/light/a.js      | 2 +-
 src/blocks/footer/light/b.js      | 2 +-
 src/blocks/footer/light/c.js      | 2 +-
 src/blocks/footer/light/e.js      | 2 +-
 src/blocks/gallery/dark/a.js      | 2 +-
 src/blocks/gallery/dark/b.js      | 2 +-
 src/blocks/gallery/dark/c.js      | 2 +-
 src/blocks/gallery/light/a.js     | 2 +-
 src/blocks/gallery/light/b.js     | 2 +-
 src/blocks/gallery/light/c.js     | 2 +-
 src/blocks/pricing/dark/a.js      | 2 +-
 src/blocks/pricing/dark/b.js      | 2 +-
 src/blocks/pricing/light/a.js     | 2 +-
 src/blocks/pricing/light/b.js     | 2 +-
 src/blocks/statistic/dark/a.js    | 2 +-
 src/blocks/statistic/dark/b.js    | 2 +-
 src/blocks/statistic/dark/c.js    | 2 +-
 src/blocks/statistic/light/a.js   | 2 +-
 src/blocks/statistic/light/b.js   | 2 +-
 src/blocks/statistic/light/c.js   | 2 +-
 src/blocks/step/dark/a.js         | 2 +-
 src/blocks/step/dark/b.js         | 2 +-
 src/blocks/step/dark/c.js         | 2 +-
 src/blocks/step/light/a.js        | 2 +-
 src/blocks/step/light/b.js        | 2 +-
 src/blocks/step/light/c.js        | 2 +-
 src/blocks/team/dark/a.js         | 2 +-
 src/blocks/team/dark/b.js         | 2 +-
 src/blocks/team/dark/c.js         | 2 +-
 src/blocks/team/light/a.js        | 2 +-
 src/blocks/team/light/b.js        | 2 +-
 src/blocks/team/light/c.js        | 2 +-
 src/blocks/testimonial/dark/a.js  | 2 +-
 src/blocks/testimonial/dark/b.js  | 2 +-
 src/blocks/testimonial/dark/c.js  | 2 +-
 src/blocks/testimonial/light/a.js | 2 +-
 src/blocks/testimonial/light/b.js | 2 +-
 src/blocks/testimonial/light/c.js | 2 +-
 102 files changed, 102 insertions(+), 102 deletions(-)

diff --git a/src/blocks/blog/dark/a.js b/src/blocks/blog/dark/a.js
index 1f18a87..ef98694 100644
--- a/src/blocks/blog/dark/a.js
+++ b/src/blocks/blog/dark/a.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkBlogA(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="p-4 md:w-1/3">
             <div className="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
diff --git a/src/blocks/blog/dark/b.js b/src/blocks/blog/dark/b.js
index ce6cad3..3e5e1a9 100644
--- a/src/blocks/blog/dark/b.js
+++ b/src/blocks/blog/dark/b.js
@@ -5,7 +5,7 @@ import PropTypes from  "prop-types";
 function DarkBlogB(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="p-4 lg:w-1/3">
             <div className="h-full bg-gray-800 bg-opacity-40 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
diff --git a/src/blocks/blog/dark/c.js b/src/blocks/blog/dark/c.js
index 780c50a..b66182f 100644
--- a/src/blocks/blog/dark/c.js
+++ b/src/blocks/blog/dark/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkBlogC(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-12">
           <div className="p-12 md:w-1/2 flex flex-col items-start">
             <span className="inline-block py-1 px-2 rounded bg-gray-800 text-gray-400 text-opacity-75 text-xs font-medium tracking-widest">
diff --git a/src/blocks/blog/dark/d.js b/src/blocks/blog/dark/d.js
index 855b8cd..edf42d3 100644
--- a/src/blocks/blog/dark/d.js
+++ b/src/blocks/blog/dark/d.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkBlogD(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="-my-8 divide-y-2 divide-gray-800">
           <div className="py-8 flex flex-wrap md:flex-nowrap">
             <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
diff --git a/src/blocks/blog/dark/e.js b/src/blocks/blog/dark/e.js
index 7ac0fdf..6edbea2 100644
--- a/src/blocks/blog/dark/e.js
+++ b/src/blocks/blog/dark/e.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkBlogE(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -mx-4 -my-8">
           <div className="py-8 px-4 lg:w-1/3">
             <div className="h-full flex items-start">
diff --git a/src/blocks/blog/light/a.js b/src/blocks/blog/light/a.js
index 41326c5..e87e565 100644
--- a/src/blocks/blog/light/a.js
+++ b/src/blocks/blog/light/a.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightBlogA(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="p-4 md:w-1/3">
             <div className="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
diff --git a/src/blocks/blog/light/b.js b/src/blocks/blog/light/b.js
index aa86ef2..0331ae7 100644
--- a/src/blocks/blog/light/b.js
+++ b/src/blocks/blog/light/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightBlogB(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="p-4 lg:w-1/3">
             <div className="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
diff --git a/src/blocks/blog/light/c.js b/src/blocks/blog/light/c.js
index 7b5a5c3..2f7d3ff 100644
--- a/src/blocks/blog/light/c.js
+++ b/src/blocks/blog/light/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightBlogC(props) {
   return (
     <section className="text-gray-600 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-12">
           <div className="p-12 md:w-1/2 flex flex-col items-start">
             <span className={`inline-block py-1 px-2 rounded bg-${props.theme}-50 text-${props.theme}-500 text-xs font-medium tracking-widest`}>
diff --git a/src/blocks/blog/light/d.js b/src/blocks/blog/light/d.js
index 2ca014f..7d3dca6 100644
--- a/src/blocks/blog/light/d.js
+++ b/src/blocks/blog/light/d.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightBlogD(props) {
   return (
     <section className="text-gray-600 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="-my-8 divide-y-2 divide-gray-100">
           <div className="py-8 flex flex-wrap md:flex-nowrap">
             <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
diff --git a/src/blocks/blog/light/e.js b/src/blocks/blog/light/e.js
index 37dc4f6..348e4d2 100644
--- a/src/blocks/blog/light/e.js
+++ b/src/blocks/blog/light/e.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightBlogE(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -mx-4 -my-8">
           <div className="py-8 px-4 lg:w-1/3">
             <div className="h-full flex items-start">
diff --git a/src/blocks/contact/dark/a.js b/src/blocks/contact/dark/a.js
index 582076f..26c972c 100644
--- a/src/blocks/contact/dark/a.js
+++ b/src/blocks/contact/dark/a.js
@@ -17,7 +17,7 @@ function DarkContactA(props) {
           src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=%C4%B0zmir+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"
         />
       </div>
-      <div className="container px-5 py-24 mx-auto flex">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex">
         <div className="lg:w-1/3 md:w-1/2 bg-gray-900 shadow-md rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
           <h2 className="text-white text-lg mb-1 font-medium title-font">
             Feedback
diff --git a/src/blocks/contact/dark/b.js b/src/blocks/contact/dark/b.js
index 003ab46..7c9f0fa 100644
--- a/src/blocks/contact/dark/b.js
+++ b/src/blocks/contact/dark/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkContactB(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font relative">
-      <div className="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex sm:flex-nowrap flex-wrap">
         <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
           <iframe
             width="100%"
diff --git a/src/blocks/contact/dark/c.js b/src/blocks/contact/dark/c.js
index c03a8cc..a007bfb 100644
--- a/src/blocks/contact/dark/c.js
+++ b/src/blocks/contact/dark/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkContactC(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font relative">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-12">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
             Contact Us
diff --git a/src/blocks/contact/light/a.js b/src/blocks/contact/light/a.js
index 9f7d044..ae48c08 100644
--- a/src/blocks/contact/light/a.js
+++ b/src/blocks/contact/light/a.js
@@ -17,7 +17,7 @@ function LightContactA(props) {
           src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=%C4%B0zmir+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"
         />
       </div>
-      <div className="container px-5 py-24 mx-auto flex">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex">
         <div className="lg:w-1/3 md:w-1/2 bg-white rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md">
           <h2 className="text-gray-900 text-lg mb-1 font-medium title-font">
             Feedback
diff --git a/src/blocks/contact/light/b.js b/src/blocks/contact/light/b.js
index 2cc43b3..7dee39c 100644
--- a/src/blocks/contact/light/b.js
+++ b/src/blocks/contact/light/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightContactB(props) {
   return (
     <section className="text-gray-600 body-font relative">
-      <div className="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex sm:flex-nowrap flex-wrap">
         <div className="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
           <iframe
             width="100%"
diff --git a/src/blocks/contact/light/c.js b/src/blocks/contact/light/c.js
index a9e2170..214bd8f 100644
--- a/src/blocks/contact/light/c.js
+++ b/src/blocks/contact/light/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightContactC(props) {
   return (
     <section className="text-gray-600 body-font relative">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-12">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
             Contact Us
diff --git a/src/blocks/content/dark/a.js b/src/blocks/content/dark/a.js
index f30dd51..2dcb971 100644
--- a/src/blocks/content/dark/a.js
+++ b/src/blocks/content/dark/a.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkContentA(props) {
   return (
     <section className="text-gray-400 body-font bg-gray-900">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h2 className={`text-xs text-${props.theme}-400 tracking-widest font-medium title-font mb-1`}>
             ROOF PARTY POLAROID
diff --git a/src/blocks/content/dark/b.js b/src/blocks/content/dark/b.js
index b8f7452..1a809b3 100644
--- a/src/blocks/content/dark/b.js
+++ b/src/blocks/content/dark/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkContentB(props) {
   return (
     <section className="text-gray-400 body-font bg-gray-900">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap w-full mb-20">
           <div className="lg:w-1/2 w-full mb-6 lg:mb-0">
             <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
diff --git a/src/blocks/content/dark/c.js b/src/blocks/content/dark/c.js
index 579a4df..c02dab7 100644
--- a/src/blocks/content/dark/c.js
+++ b/src/blocks/content/dark/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkContentC(props) {
   return (
     <section className="text-gray-400 body-font bg-gray-900">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
             Pitchfork Kickstarter Taxidermy
diff --git a/src/blocks/content/dark/e.js b/src/blocks/content/dark/e.js
index 7297bae..ed0a7e0 100644
--- a/src/blocks/content/dark/e.js
+++ b/src/blocks/content/dark/e.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkContentE(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <h2 className="sm:text-3xl text-2xl text-white font-medium title-font mb-2 md:w-2/5">
           Kickstarter Actually Pinterest Brunch Bitters Occupy
         </h2>
diff --git a/src/blocks/content/dark/f.js b/src/blocks/content/dark/f.js
index 82d8dbe..c109e5c 100644
--- a/src/blocks/content/dark/f.js
+++ b/src/blocks/content/dark/f.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkContentF(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-col">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-col">
         <div className="lg:w-4/6 mx-auto">
           <div className="rounded-lg h-64 overflow-hidden">
             <img
diff --git a/src/blocks/content/dark/g.js b/src/blocks/content/dark/g.js
index d9e5dff..83954d2 100644
--- a/src/blocks/content/dark/g.js
+++ b/src/blocks/content/dark/g.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkContentG(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -mx-4 -mb-10 text-center">
           <div className="sm:w-1/2 mb-10 px-4">
             <div className="rounded-lg h-64 overflow-hidden">
diff --git a/src/blocks/content/dark/h.js b/src/blocks/content/dark/h.js
index e714bcd..eacd731 100644
--- a/src/blocks/content/dark/h.js
+++ b/src/blocks/content/dark/h.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkContentH(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col">
           <div className="h-1 bg-gray-800 rounded overflow-hidden">
             <div className={`w-24 h-full bg-${props.theme}-500`}></div>
diff --git a/src/blocks/content/light/a.js b/src/blocks/content/light/a.js
index 7907750..dffc832 100644
--- a/src/blocks/content/light/a.js
+++ b/src/blocks/content/light/a.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightContentA(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
             ROOF PARTY POLAROID
diff --git a/src/blocks/content/light/b.js b/src/blocks/content/light/b.js
index 842f06d..6b19ce3 100644
--- a/src/blocks/content/light/b.js
+++ b/src/blocks/content/light/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightContentB(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap w-full mb-20">
           <div className="lg:w-1/2 w-full mb-6 lg:mb-0">
             <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
diff --git a/src/blocks/content/light/c.js b/src/blocks/content/light/c.js
index 3854649..20e4958 100644
--- a/src/blocks/content/light/c.js
+++ b/src/blocks/content/light/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightContentC(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
             Pitchfork Kickstarter Taxidermy
diff --git a/src/blocks/content/light/e.js b/src/blocks/content/light/e.js
index 4b93ccf..b4aa8e0 100644
--- a/src/blocks/content/light/e.js
+++ b/src/blocks/content/light/e.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightContentE(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <h2 className="sm:text-3xl text-2xl text-gray-900 font-medium title-font mb-2 md:w-2/5">
           Kickstarter Actually Pinterest Brunch Bitters Occupy
         </h2>
diff --git a/src/blocks/content/light/f.js b/src/blocks/content/light/f.js
index 437334a..49cb5b1 100644
--- a/src/blocks/content/light/f.js
+++ b/src/blocks/content/light/f.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightContentF(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-col">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-col">
         <div className="lg:w-4/6 mx-auto">
           <div className="rounded-lg h-64 overflow-hidden">
             <img
diff --git a/src/blocks/content/light/g.js b/src/blocks/content/light/g.js
index 0cd77a8..d81c306 100644
--- a/src/blocks/content/light/g.js
+++ b/src/blocks/content/light/g.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightContentG(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -mx-4 -mb-10 text-center">
           <div className="sm:w-1/2 mb-10 px-4">
             <div className="rounded-lg h-64 overflow-hidden">
diff --git a/src/blocks/content/light/h.js b/src/blocks/content/light/h.js
index da0a71f..f6509d9 100644
--- a/src/blocks/content/light/h.js
+++ b/src/blocks/content/light/h.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightContentH(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col">
           <div className="h-1 bg-gray-200 rounded overflow-hidden">
             <div className={`w-24 h-full bg-${props.theme}-500`}></div>
diff --git a/src/blocks/cta/dark/a.js b/src/blocks/cta/dark/a.js
index 6d8cef2..1209859 100644
--- a/src/blocks/cta/dark/a.js
+++ b/src/blocks/cta/dark/a.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkCTAA(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
           <h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-white">
             Slow-carb next level shoinddgoitch ethical authentic, scenester
diff --git a/src/blocks/cta/dark/b.js b/src/blocks/cta/dark/b.js
index 3864c87..6706545 100644
--- a/src/blocks/cta/dark/b.js
+++ b/src/blocks/cta/dark/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkCTAB(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap items-center">
         <div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
           <h1 className="title-font font-medium text-3xl text-white">
             Slow-carb next level shoindxgoitch ethical authentic, poko scenester
diff --git a/src/blocks/cta/dark/c.js b/src/blocks/cta/dark/c.js
index 67c6af9..30dec1b 100644
--- a/src/blocks/cta/dark/c.js
+++ b/src/blocks/cta/dark/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkCTAC(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-12">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
             Master Cleanse Reliac Heirloom
diff --git a/src/blocks/cta/dark/d.js b/src/blocks/cta/dark/d.js
index 23591a9..d2798ee 100644
--- a/src/blocks/cta/dark/d.js
+++ b/src/blocks/cta/dark/d.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkCTAD(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex items-center md:flex-row flex-col">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex items-center md:flex-row flex-col">
         <div className="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center">
           <h2 className={`text-xs text-${props.theme}-400 tracking-widest font-medium title-font mb-1`}>
             ROOF PARTY POLAROID
diff --git a/src/blocks/cta/light/a.js b/src/blocks/cta/light/a.js
index daddd92..8898846 100644
--- a/src/blocks/cta/light/a.js
+++ b/src/blocks/cta/light/a.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightCTAA(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
           <h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">
             Slow-carb next level shoindxgoitch ethical authentic, scenester
diff --git a/src/blocks/cta/light/b.js b/src/blocks/cta/light/b.js
index 4252866..b35d16b 100644
--- a/src/blocks/cta/light/b.js
+++ b/src/blocks/cta/light/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightCTAB(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap items-center">
         <div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
           <h1 className="title-font font-medium text-3xl text-gray-900">
             Slow-carb next level shoindcgoitch ethical authentic, poko scenester
diff --git a/src/blocks/cta/light/c.js b/src/blocks/cta/light/c.js
index f0fc13c..3dc2392 100644
--- a/src/blocks/cta/light/c.js
+++ b/src/blocks/cta/light/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightCTAC(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-12">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
             Master Cleanse Reliac Heirloom
diff --git a/src/blocks/cta/light/d.js b/src/blocks/cta/light/d.js
index ba9e071..b3d7be5 100644
--- a/src/blocks/cta/light/d.js
+++ b/src/blocks/cta/light/d.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightCTAD(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex items-center md:flex-row flex-col">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex items-center md:flex-row flex-col">
         <div className="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center">
           <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
             ROOF PARTY POLAROID
diff --git a/src/blocks/ecommerce/dark/a.js b/src/blocks/ecommerce/dark/a.js
index 2cdf107..aea0414 100644
--- a/src/blocks/ecommerce/dark/a.js
+++ b/src/blocks/ecommerce/dark/a.js
@@ -3,7 +3,7 @@ import React from "react";
 function DarkEcommerceA() {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
             <a href className="block relative h-48 rounded overflow-hidden">
diff --git a/src/blocks/ecommerce/dark/b.js b/src/blocks/ecommerce/dark/b.js
index bca540f..420d82f 100644
--- a/src/blocks/ecommerce/dark/b.js
+++ b/src/blocks/ecommerce/dark/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkEcommerceB(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="lg:w-4/5 mx-auto flex flex-wrap">
           <img
             alt="ecommerce"
diff --git a/src/blocks/ecommerce/dark/c.js b/src/blocks/ecommerce/dark/c.js
index ea611b5..1e0b43f 100644
--- a/src/blocks/ecommerce/dark/c.js
+++ b/src/blocks/ecommerce/dark/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkEcommerceC(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="lg:w-4/5 mx-auto flex flex-wrap">
           <div className="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
             <h2 className="text-sm title-font text-gray-500 tracking-widest">
diff --git a/src/blocks/ecommerce/light/a.js b/src/blocks/ecommerce/light/a.js
index 0a0a5a3..cc60207 100644
--- a/src/blocks/ecommerce/light/a.js
+++ b/src/blocks/ecommerce/light/a.js
@@ -3,7 +3,7 @@ import React from "react";
 function LightEcommerceA() {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
             <a href className="block relative h-48 rounded overflow-hidden">
diff --git a/src/blocks/ecommerce/light/b.js b/src/blocks/ecommerce/light/b.js
index 4b585c3..5312b67 100644
--- a/src/blocks/ecommerce/light/b.js
+++ b/src/blocks/ecommerce/light/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightEcommerceB(props) {
   return (
     <section className="text-gray-600 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="lg:w-4/5 mx-auto flex flex-wrap">
           <img
             alt="ecommerce"
diff --git a/src/blocks/ecommerce/light/c.js b/src/blocks/ecommerce/light/c.js
index 5f648e3..11e90a2 100644
--- a/src/blocks/ecommerce/light/c.js
+++ b/src/blocks/ecommerce/light/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightEcommerceC(props) {
   return (
     <section className="text-gray-600 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="lg:w-4/5 mx-auto flex flex-wrap">
           <div className="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
             <h2 className="text-sm title-font text-gray-500 tracking-widest">
diff --git a/src/blocks/feature/dark/a.js b/src/blocks/feature/dark/a.js
index dc04ed9..cba02ca 100644
--- a/src/blocks/feature/dark/a.js
+++ b/src/blocks/feature/dark/a.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkFeatureA(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <h1 className="sm:text-3xl text-2xl font-medium title-font text-center text-white mb-20">
           Raw Denim Heirloom Man Braid<br className="hidden sm:block" />
           Selfies Wayfarers
diff --git a/src/blocks/feature/dark/b.js b/src/blocks/feature/dark/b.js
index a694310..3e1a7b0 100644
--- a/src/blocks/feature/dark/b.js
+++ b/src/blocks/feature/dark/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkFeatureB(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font text-white mb-4">
             Raw Denim Heirloom Man Braid
diff --git a/src/blocks/feature/dark/c.js b/src/blocks/feature/dark/c.js
index 908bf82..01687e1 100644
--- a/src/blocks/feature/dark/c.js
+++ b/src/blocks/feature/dark/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkFeatureC(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
           <img
             alt="feature"
diff --git a/src/blocks/feature/dark/d.js b/src/blocks/feature/dark/d.js
index 59f44d4..ed98b53 100644
--- a/src/blocks/feature/dark/d.js
+++ b/src/blocks/feature/dark/d.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkFeatureD(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="flex flex-wrap -m-4">
           <div className="p-4 lg:w-1/2 md:w-full">
             <div className="flex border-2 rounded-lg border-gray-800 p-8 sm:flex-row flex-col">
diff --git a/src/blocks/feature/dark/e.js b/src/blocks/feature/dark/e.js
index 79fe9de..9b7f51d 100644
--- a/src/blocks/feature/dark/e.js
+++ b/src/blocks/feature/dark/e.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkFeatureE(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="flex flex-col text-center w-full mb-20">
           <h2 className={`text-xs text-${props.theme}-400 tracking-widest font-medium title-font mb-1`}>
             ROOF PARTY POLAROID
diff --git a/src/blocks/feature/dark/f.js b/src/blocks/feature/dark/f.js
index 608a14e..5718969 100644
--- a/src/blocks/feature/dark/f.js
+++ b/src/blocks/feature/dark/f.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkFeatureF(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-800 sm:flex-row flex-col">
           <div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full text-${props.theme}-400 bg-gray-800 flex-shrink-0`}>
             <svg
diff --git a/src/blocks/feature/dark/g.js b/src/blocks/feature/dark/g.js
index 4ab396d..2b6ae34 100644
--- a/src/blocks/feature/dark/g.js
+++ b/src/blocks/feature/dark/g.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkFeatureG(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-white mb-4">
             Raw Denim Heirloom Man Braid
diff --git a/src/blocks/feature/dark/h.js b/src/blocks/feature/dark/h.js
index 9563f5b..e42b386 100644
--- a/src/blocks/feature/dark/h.js
+++ b/src/blocks/feature/dark/h.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkFeatureH(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-white mb-4">
             Raw Denim Heirloom Man Braid
diff --git a/src/blocks/feature/light/a.js b/src/blocks/feature/light/a.js
index 85903ad..b82c477 100644
--- a/src/blocks/feature/light/a.js
+++ b/src/blocks/feature/light/a.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFeatureA(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <h1 className="sm:text-3xl text-2xl font-medium title-font text-center text-gray-900 mb-20">
           Raw Denim Heirloom Man Braid<br className="hidden sm:block" />
           Selfies Wayfarers
diff --git a/src/blocks/feature/light/b.js b/src/blocks/feature/light/b.js
index 640255a..723e28b 100644
--- a/src/blocks/feature/light/b.js
+++ b/src/blocks/feature/light/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFeatureB(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900 mb-4">
             Raw Denim Heirloom Man Braid
diff --git a/src/blocks/feature/light/c.js b/src/blocks/feature/light/c.js
index 3ef50e3..d8f8a60 100644
--- a/src/blocks/feature/light/c.js
+++ b/src/blocks/feature/light/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFeatureC(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
           <img
             alt="feature"
diff --git a/src/blocks/feature/light/d.js b/src/blocks/feature/light/d.js
index 7901345..2e4e30d 100644
--- a/src/blocks/feature/light/d.js
+++ b/src/blocks/feature/light/d.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFeatureD(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="flex flex-wrap -m-4">
           <div className="p-4 lg:w-1/2 md:w-full">
             <div className="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col">
diff --git a/src/blocks/feature/light/e.js b/src/blocks/feature/light/e.js
index 6536c97..0fda61d 100644
--- a/src/blocks/feature/light/e.js
+++ b/src/blocks/feature/light/e.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFeatureE(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
             ROOF PARTY POLAROID
diff --git a/src/blocks/feature/light/f.js b/src/blocks/feature/light/f.js
index 4815684..a0078dd 100644
--- a/src/blocks/feature/light/f.js
+++ b/src/blocks/feature/light/f.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFeatureF(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
           <div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
             <svg
diff --git a/src/blocks/feature/light/g.js b/src/blocks/feature/light/g.js
index 2c0e1a1..13517f1 100644
--- a/src/blocks/feature/light/g.js
+++ b/src/blocks/feature/light/g.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFeatureG(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 mb-4">
             Raw Denim Heirloom Man Braid
diff --git a/src/blocks/feature/light/h.js b/src/blocks/feature/light/h.js
index 6f4daa8..f148b63 100644
--- a/src/blocks/feature/light/h.js
+++ b/src/blocks/feature/light/h.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFeatureH(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 mb-4">
             Raw Denim Heirloom Man Braid
diff --git a/src/blocks/footer/dark/a.js b/src/blocks/footer/dark/a.js
index 5e9ca47..9f810c8 100644
--- a/src/blocks/footer/dark/a.js
+++ b/src/blocks/footer/dark/a.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkFooterA(props) {
   return (
     <footer className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
         <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
           <a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
             <svg
diff --git a/src/blocks/footer/dark/b.js b/src/blocks/footer/dark/b.js
index b56f1bc..f1e49d9 100644
--- a/src/blocks/footer/dark/b.js
+++ b/src/blocks/footer/dark/b.js
@@ -5,7 +5,7 @@ import PropTypes from  "prop-types";
 function DarkFooterB(props) {
   return (
     <footer className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
         <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
           <a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
             <svg
diff --git a/src/blocks/footer/dark/c.js b/src/blocks/footer/dark/c.js
index b35bfc0..25afc51 100644
--- a/src/blocks/footer/dark/c.js
+++ b/src/blocks/footer/dark/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkFooterC(props) {
   return (
     <footer className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
           <div className="lg:w-1/6 md:w-1/2 w-full px-4">
             <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
diff --git a/src/blocks/footer/dark/e.js b/src/blocks/footer/dark/e.js
index a675f33..7a127c7 100644
--- a/src/blocks/footer/dark/e.js
+++ b/src/blocks/footer/dark/e.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkFooterE(props) {
   return (
     <footer className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap md:text-left text-center order-first">
           <div className="lg:w-1/4 md:w-1/2 w-full px-4">
             <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
diff --git a/src/blocks/footer/light/a.js b/src/blocks/footer/light/a.js
index fe68c0a..5849323 100644
--- a/src/blocks/footer/light/a.js
+++ b/src/blocks/footer/light/a.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFooterA(props) {
   return (
     <footer className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
         <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
           <a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
             <svg
diff --git a/src/blocks/footer/light/b.js b/src/blocks/footer/light/b.js
index 35d5b4c..a8a90da 100644
--- a/src/blocks/footer/light/b.js
+++ b/src/blocks/footer/light/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFooterB(props) {
   return (
     <footer className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
         <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
           <a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
             <svg
diff --git a/src/blocks/footer/light/c.js b/src/blocks/footer/light/c.js
index 6c22b07..cb7ecc3 100644
--- a/src/blocks/footer/light/c.js
+++ b/src/blocks/footer/light/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFooterC(props) {
   return (
     <footer className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
           <div className="lg:w-1/6 md:w-1/2 w-full px-4">
             <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
diff --git a/src/blocks/footer/light/e.js b/src/blocks/footer/light/e.js
index 51d515d..5020d6e 100644
--- a/src/blocks/footer/light/e.js
+++ b/src/blocks/footer/light/e.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightFooterE(props) {
   return (
     <footer className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap md:text-left text-center order-first">
           <div className="lg:w-1/4 md:w-1/2 w-full px-4">
             <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
diff --git a/src/blocks/gallery/dark/a.js b/src/blocks/gallery/dark/a.js
index e249f8d..1a94a1c 100644
--- a/src/blocks/gallery/dark/a.js
+++ b/src/blocks/gallery/dark/a.js
@@ -3,7 +3,7 @@ import React from "react";
 function DarkGalleryA() {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="flex w-full mb-20 flex-wrap">
           <h1 className="sm:text-3xl text-2xl font-medium title-font text-white lg:w-1/3 lg:mb-0 mb-4">
             Master Cleanse Reliac Heirloom
diff --git a/src/blocks/gallery/dark/b.js b/src/blocks/gallery/dark/b.js
index 1c0a2c6..fc919ac 100644
--- a/src/blocks/gallery/dark/b.js
+++ b/src/blocks/gallery/dark/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkGalleryB(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="lg:w-2/3 mx-auto">
           <div className="flex flex-wrap w-full bg-gray-800 py-32 px-10 relative mb-4">
             <img
diff --git a/src/blocks/gallery/dark/c.js b/src/blocks/gallery/dark/c.js
index c81ffb5..0024498 100644
--- a/src/blocks/gallery/dark/c.js
+++ b/src/blocks/gallery/dark/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function DarkGalleryC(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
             Master Cleanse Reliac Heirloom
diff --git a/src/blocks/gallery/light/a.js b/src/blocks/gallery/light/a.js
index ff3ee33..fcce727 100644
--- a/src/blocks/gallery/light/a.js
+++ b/src/blocks/gallery/light/a.js
@@ -3,7 +3,7 @@ import React from "react";
 function LightGalleryA() {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="flex w-full mb-20 flex-wrap">
           <h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900 lg:w-1/3 lg:mb-0 mb-4">
             Master Cleanse Reliac Heirloom
diff --git a/src/blocks/gallery/light/b.js b/src/blocks/gallery/light/b.js
index 83ba4f9..d85af35 100644
--- a/src/blocks/gallery/light/b.js
+++ b/src/blocks/gallery/light/b.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightGalleryB(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="lg:w-2/3 mx-auto">
           <div className="flex flex-wrap w-full bg-gray-100 py-32 px-10 relative mb-4">
             <img
diff --git a/src/blocks/gallery/light/c.js b/src/blocks/gallery/light/c.js
index 4df4254..9bf2b00 100644
--- a/src/blocks/gallery/light/c.js
+++ b/src/blocks/gallery/light/c.js
@@ -4,7 +4,7 @@ import PropTypes from  "prop-types";
 function LightGalleryC(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
             Master Cleanse Reliac Heirloom
diff --git a/src/blocks/pricing/dark/a.js b/src/blocks/pricing/dark/a.js
index a42ec98..39b16f1 100644
--- a/src/blocks/pricing/dark/a.js
+++ b/src/blocks/pricing/dark/a.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function DarkPricingA(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-white">
             Pricing
diff --git a/src/blocks/pricing/dark/b.js b/src/blocks/pricing/dark/b.js
index 0033371..4805f8d 100644
--- a/src/blocks/pricing/dark/b.js
+++ b/src/blocks/pricing/dark/b.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function DarkPricingB(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-white">
             Pricing
diff --git a/src/blocks/pricing/light/a.js b/src/blocks/pricing/light/a.js
index 5a5ff36..0f0e1ae 100644
--- a/src/blocks/pricing/light/a.js
+++ b/src/blocks/pricing/light/a.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function LightPricingA(props) {
   return (
     <section className="text-gray-600 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900">
             Pricing
diff --git a/src/blocks/pricing/light/b.js b/src/blocks/pricing/light/b.js
index 2ac36a4..c5e43c5 100644
--- a/src/blocks/pricing/light/b.js
+++ b/src/blocks/pricing/light/b.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function LightPricingB(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900">
             Pricing
diff --git a/src/blocks/statistic/dark/a.js b/src/blocks/statistic/dark/a.js
index 2f2e728..1c029e0 100644
--- a/src/blocks/statistic/dark/a.js
+++ b/src/blocks/statistic/dark/a.js
@@ -3,7 +3,7 @@ import React from "react";
 function DarkStatisticA() {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-4 text-center">
           <div className="p-4 sm:w-1/4 w-1/2">
             <h2 className="title-font font-medium sm:text-4xl text-3xl text-white">
diff --git a/src/blocks/statistic/dark/b.js b/src/blocks/statistic/dark/b.js
index 71b5db1..003982a 100644
--- a/src/blocks/statistic/dark/b.js
+++ b/src/blocks/statistic/dark/b.js
@@ -3,7 +3,7 @@ import React from "react";
 function DarkStatisticB() {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="flex flex-wrap -mx-4 mt-auto mb-auto lg:w-1/2 sm:w-2/3 content-start sm:pr-10">
           <div className="w-full sm:p-4 px-4 mb-6">
             <h1 className="title-font font-medium text-xl mb-2 text-white">
diff --git a/src/blocks/statistic/dark/c.js b/src/blocks/statistic/dark/c.js
index 7a81cec..7d12f72 100644
--- a/src/blocks/statistic/dark/c.js
+++ b/src/blocks/statistic/dark/c.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function DarkStatisticC(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
             Master Cleanse Reliac Heirloom
diff --git a/src/blocks/statistic/light/a.js b/src/blocks/statistic/light/a.js
index 21eedb0..cfed2d0 100644
--- a/src/blocks/statistic/light/a.js
+++ b/src/blocks/statistic/light/a.js
@@ -3,7 +3,7 @@ import React from "react";
 function LightStatisticA() {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-4 text-center">
           <div className="p-4 sm:w-1/4 w-1/2">
             <h2 className="title-font font-medium sm:text-4xl text-3xl text-gray-900">
diff --git a/src/blocks/statistic/light/b.js b/src/blocks/statistic/light/b.js
index b12b3ac..8e40b56 100644
--- a/src/blocks/statistic/light/b.js
+++ b/src/blocks/statistic/light/b.js
@@ -3,7 +3,7 @@ import React from "react";
 function LightStatisticB() {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="flex flex-wrap -mx-4 mt-auto mb-auto lg:w-1/2 sm:w-2/3 content-start sm:pr-10">
           <div className="w-full sm:p-4 px-4 mb-6">
             <h1 className="title-font font-medium text-xl mb-2 text-gray-900">
diff --git a/src/blocks/statistic/light/c.js b/src/blocks/statistic/light/c.js
index a060222..899c005 100644
--- a/src/blocks/statistic/light/c.js
+++ b/src/blocks/statistic/light/c.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function LightStatisicC(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
             Master Cleanse Reliac Heirloom
diff --git a/src/blocks/step/dark/a.js b/src/blocks/step/dark/a.js
index 712be6f..11cb5fd 100644
--- a/src/blocks/step/dark/a.js
+++ b/src/blocks/step/dark/a.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function DarkStepA(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="flex flex-wrap w-full">
           <div className="lg:w-2/5 md:w-1/2 md:pr-10 md:py-6">
             <div className="flex relative pb-12">
diff --git a/src/blocks/step/dark/b.js b/src/blocks/step/dark/b.js
index 16dccd2..c965e94 100644
--- a/src/blocks/step/dark/b.js
+++ b/src/blocks/step/dark/b.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function DarkStepB(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap flex-col">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap flex-col">
         <div className="flex mx-auto flex-wrap mb-20">
           <a href className={`sm:px-6 py-3 w-1/2 sm:w-auto justify-center sm:justify-start border-b-2 title-font font-medium bg-gray-800 inline-flex items-center leading-none border-${props.theme}-500 text-white tracking-wider rounded-t`}>
             <svg
diff --git a/src/blocks/step/dark/c.js b/src/blocks/step/dark/c.js
index a32fae6..21f9c65 100644
--- a/src/blocks/step/dark/c.js
+++ b/src/blocks/step/dark/c.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function DarkStepC(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="flex relative pt-10 pb-20 sm:items-center md:w-2/3 mx-auto">
           <div className="h-full w-6 absolute inset-0 flex items-center justify-center">
             <div className="h-full w-1 bg-gray-800 pointer-events-none"></div>
diff --git a/src/blocks/step/light/a.js b/src/blocks/step/light/a.js
index e780215..e994037 100644
--- a/src/blocks/step/light/a.js
+++ b/src/blocks/step/light/a.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function LightStepA(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="flex flex-wrap w-full">
           <div className="lg:w-2/5 md:w-1/2 md:pr-10 md:py-6">
             <div className="flex relative pb-12">
diff --git a/src/blocks/step/light/b.js b/src/blocks/step/light/b.js
index 8fcb0bb..e59b139 100644
--- a/src/blocks/step/light/b.js
+++ b/src/blocks/step/light/b.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function LightStepB(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap flex-col">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap flex-col">
         <div className="flex mx-auto flex-wrap mb-20">
           <a href className={`sm:px-6 py-3 w-1/2 sm:w-auto justify-center sm:justify-start border-b-2 title-font font-medium bg-gray-100 inline-flex items-center leading-none border-${props.theme}-500 text-${props.theme}-500 tracking-wider rounded-t`}>
             <svg
diff --git a/src/blocks/step/light/c.js b/src/blocks/step/light/c.js
index 2044965..d6452d4 100644
--- a/src/blocks/step/light/c.js
+++ b/src/blocks/step/light/c.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function LightStepC(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+      <div className="container px-5 xl:py-24 py-12 mx-auto flex flex-wrap">
         <div className="flex relative pt-10 pb-20 sm:items-center md:w-2/3 mx-auto">
           <div className="h-full w-6 absolute inset-0 flex items-center justify-center">
             <div className="h-full w-1 bg-gray-200 pointer-events-none"></div>
diff --git a/src/blocks/team/dark/a.js b/src/blocks/team/dark/a.js
index 9a29002..795bde6 100644
--- a/src/blocks/team/dark/a.js
+++ b/src/blocks/team/dark/a.js
@@ -3,7 +3,7 @@ import React from "react";
 function DarkTeamA(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
             Our Team
diff --git a/src/blocks/team/dark/b.js b/src/blocks/team/dark/b.js
index 8341d0c..c1b7267 100644
--- a/src/blocks/team/dark/b.js
+++ b/src/blocks/team/dark/b.js
@@ -3,7 +3,7 @@ import React from "react";
 function DarkTeamB() {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="text-2xl font-medium title-font mb-4 text-white tracking-widest">
             OUR TEAM
diff --git a/src/blocks/team/dark/c.js b/src/blocks/team/dark/c.js
index b211343..021fb47 100644
--- a/src/blocks/team/dark/c.js
+++ b/src/blocks/team/dark/c.js
@@ -3,7 +3,7 @@ import React from "react";
 function DarkTeamC() {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="text-2xl font-medium title-font mb-4 text-white">
             OUR TEAM
diff --git a/src/blocks/team/light/a.js b/src/blocks/team/light/a.js
index 2eabad5..46144b5 100644
--- a/src/blocks/team/light/a.js
+++ b/src/blocks/team/light/a.js
@@ -3,7 +3,7 @@ import React from "react";
 function LightTeamA() {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
             Our Team
diff --git a/src/blocks/team/light/b.js b/src/blocks/team/light/b.js
index 57d25a2..5179cb9 100644
--- a/src/blocks/team/light/b.js
+++ b/src/blocks/team/light/b.js
@@ -3,7 +3,7 @@ import React from "react";
 function LightTeamB() {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="text-2xl font-medium title-font mb-4 text-gray-900 tracking-widest">
             OUR TEAM
diff --git a/src/blocks/team/light/c.js b/src/blocks/team/light/c.js
index b5b00d7..c329227 100644
--- a/src/blocks/team/light/c.js
+++ b/src/blocks/team/light/c.js
@@ -3,7 +3,7 @@ import React from "react";
 function LightTeamC() {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="text-2xl font-medium title-font mb-4 text-gray-900">
             OUR TEAM
diff --git a/src/blocks/testimonial/dark/a.js b/src/blocks/testimonial/dark/a.js
index 172532f..6fdde63 100644
--- a/src/blocks/testimonial/dark/a.js
+++ b/src/blocks/testimonial/dark/a.js
@@ -3,7 +3,7 @@ import React from "react";
 function DarkTestimonialA() {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <h1 className="text-3xl font-medium title-font text-white mb-12 text-center">
           Testimonials
         </h1>
diff --git a/src/blocks/testimonial/dark/b.js b/src/blocks/testimonial/dark/b.js
index 726c58e..5d55b1a 100644
--- a/src/blocks/testimonial/dark/b.js
+++ b/src/blocks/testimonial/dark/b.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function DarkTestimonialB(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="xl:w-1/2 lg:w-3/4 w-full mx-auto text-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/blocks/testimonial/dark/c.js b/src/blocks/testimonial/dark/c.js
index 01bac8c..c271339 100644
--- a/src/blocks/testimonial/dark/c.js
+++ b/src/blocks/testimonial/dark/c.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function DarkTestimonialC(props) {
   return (
     <section className="text-gray-400 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="lg:w-1/3 lg:mb-0 mb-6 p-4">
             <div className="h-full text-center">
diff --git a/src/blocks/testimonial/light/a.js b/src/blocks/testimonial/light/a.js
index 5b5265c..38d9649 100644
--- a/src/blocks/testimonial/light/a.js
+++ b/src/blocks/testimonial/light/a.js
@@ -3,7 +3,7 @@ import React from "react";
 function LightTestimonialA(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <h1 className="text-3xl font-medium title-font text-gray-900 mb-12 text-center">
           Testimonials
         </h1>
diff --git a/src/blocks/testimonial/light/b.js b/src/blocks/testimonial/light/b.js
index 3ce6c08..0a6737b 100644
--- a/src/blocks/testimonial/light/b.js
+++ b/src/blocks/testimonial/light/b.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function LightTestimonialC(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="xl:w-1/2 lg:w-3/4 w-full mx-auto text-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/blocks/testimonial/light/c.js b/src/blocks/testimonial/light/c.js
index 3636054..7312461 100644
--- a/src/blocks/testimonial/light/c.js
+++ b/src/blocks/testimonial/light/c.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 function LightTestimonialC(props) {
   return (
     <section className="text-gray-600 body-font">
-      <div className="container px-5 py-24 mx-auto">
+      <div className="container px-5 xl:py-24 py-12 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="lg:w-1/3 lg:mb-0 mb-6 p-4">
             <div className="h-full text-center">