From 4d8a5d209850d204876b9cf5c11643148dc8efaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Thu, 14 Apr 2022 12:46:23 +0200
Subject: [PATCH] Blog styles

---
 src/components/common/card/card.module.scss            |  2 +-
 src/components/sections/blog/hero/hero.module.scss     |  6 +++---
 .../sections/blog/post-content/content.module.scss     |  8 ++++++--
 .../sections/blog/post-hero/hero.module.scss           |  2 --
 src/components/sections/blog/search/index.tsx          |  2 +-
 src/components/sections/blog/search/search.module.scss | 10 ++++++++--
 6 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/common/card/card.module.scss b/src/components/common/card/card.module.scss
index c7c9014..0de3d13 100644
--- a/src/components/common/card/card.module.scss
+++ b/src/components/common/card/card.module.scss
@@ -209,7 +209,7 @@
     }
   }
 
-  @media screen and (min-width: 801px) {
+  @media screen and (min-width: 901px) {
     &.horizontal {
       flex-direction: row;
       gap: tovw(44px, 'default', 44px);
diff --git a/src/components/sections/blog/hero/hero.module.scss b/src/components/sections/blog/hero/hero.module.scss
index ccb682c..87a1242 100644
--- a/src/components/sections/blog/hero/hero.module.scss
+++ b/src/components/sections/blog/hero/hero.module.scss
@@ -4,13 +4,13 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   background: linear-gradient(
     180deg,
     rgb(0 0 244 / 0.9) 1.63%,
     rgb(0 0 244 / 0) 99.89%
   );
-  padding-top: tovw(255px, 'default', 204px);
+  padding-top: tovw(185px, 'default', 104px);
   padding-bottom: tovw(92px, 'default', 40px);
   max-width: 100%;
   min-height: calc(var(--vh) * 100);
@@ -22,7 +22,7 @@
 
   .container {
     z-index: 10;
-    padding-top: tovw(156px, 'default', 159px);
+    padding-top: tovw(178px, 'default', 88px);
 
     @media screen and (max-width: 800px) {
       padding-left: 0;
diff --git a/src/components/sections/blog/post-content/content.module.scss b/src/components/sections/blog/post-content/content.module.scss
index 502bb45..82d0d2b 100644
--- a/src/components/sections/blog/post-content/content.module.scss
+++ b/src/components/sections/blog/post-content/content.module.scss
@@ -4,23 +4,27 @@ $img-height: 590px;
 $img-height-mobile: 200px;
 
 .section {
-  margin-top: tovw(108px, 'default', 90px);
-  padding-bottom: tovw(147px, 'default', 56px);
+  margin-top: tovw(108px, 'default', 60px);
+  margin-bottom: tovw(147px, 'default', 60px);
 
   @media screen and (max-width: 800px) {
     transform: none;
   }
 
   .container {
+    min-width: tovw(856px, 'default', 856px);
+
     @include respond-to('mobile') {
       padding-left: 0;
       padding-right: 0;
+      min-width: unset;
     }
   }
 
   .image__container {
     border-top: tovw(1px, 'default', 1px) solid var(--color-white);
     border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
+    margin-bottom: tovw(124px, 'default', 60px);
     width: 100%;
     height: tovw($img-height, 'default', $img-height-mobile);
 
diff --git a/src/components/sections/blog/post-hero/hero.module.scss b/src/components/sections/blog/post-hero/hero.module.scss
index 71ce816..5b3e589 100644
--- a/src/components/sections/blog/post-hero/hero.module.scss
+++ b/src/components/sections/blog/post-hero/hero.module.scss
@@ -12,8 +12,6 @@
   );
   padding-top: tovw(220px, 'default', 150px);
   max-width: 100%;
-
-  // min-height: calc(var(--vh) * 100);
   overflow: visible;
   text-align: center;
 
diff --git a/src/components/sections/blog/search/index.tsx b/src/components/sections/blog/search/index.tsx
index a73ede2..d4bb711 100644
--- a/src/components/sections/blog/search/index.tsx
+++ b/src/components/sections/blog/search/index.tsx
@@ -46,7 +46,7 @@ export const SearchContainer = ({ children }: ContainerProps) => {
 export const LoadMoreContainer = ({ children }: ContainerProps) => {
   return (
     <Section>
-      <Container>
+      <Container className={s['load-more__container']}>
         <div className={s['load-more']}>{children}</div>
       </Container>
     </Section>
diff --git a/src/components/sections/blog/search/search.module.scss b/src/components/sections/blog/search/search.module.scss
index 77978e7..2e7988b 100644
--- a/src/components/sections/blog/search/search.module.scss
+++ b/src/components/sections/blog/search/search.module.scss
@@ -17,7 +17,7 @@
     @media screen and (max-width: 800px) {
       padding: 0 8px;
       width: 100%;
-      overflow-x: scroll;
+      overflow-x: auto;
       padding-left: 0;
       padding-right: 0;
     }
@@ -33,10 +33,16 @@
 }
 
 .load-more {
-  padding-top: tovw(120px, 'default', 80px);
+  padding-top: tovw(80px, 'default', 45px);
   padding-bottom: tovw(34px, 'default', 120px);
   text-align: center;
 
+  &__container {
+    @media screen and (max-width: 800px) {
+      padding: 0;
+    }
+  }
+
   > button {
     @media screen and (max-width: 800px) {
       width: 100%;