[Agregar] responsive design a parte del home

assets/styles/components/articles/articles.css

@@ -11,8 +11,8 @@ Metodologia => BEM
     margin: 0 auto;
     display: flex;
     flex-direction: column;
-    width: 60%;
-    max-width: 500px;
+    width: 90%;
+    max-width: 360px;
     min-width: 288px;
     border-radius: 8px;
     overflow: hidden;

assets/styles/pages/home/home-desktop.css

@@ -0,0 +1,49 @@
+/* Estilos para el header */
+
+.hero {
+    flex-direction: row-reverse;
+    text-align: initial;
+    justify-content: space-between;
+}
+
+.hero__img-wrapper {
+    flex-basis: 40%;
+    max-width: 400px;
+    margin: 0;
+}
+
+.hero__text-container {
+    flex-basis: 50%;
+}
+
+
+.hero__CTA {
+     margin: 0;
+     margin-bottom: 10px;
+}
+
+.hero__secundary-CTA {
+    margin-top: 0;
+}
+
+.hero__button {
+    margin: 0;
+}
+
+/* Estilos para la seccion de posts mas recientes */
+
+.recent__posts {
+    width: 90%;
+    margin: 0 auto;
+}
+
+.recent-cards__container {
+    grid-template-columns: repeat(auto-fill,minmax(288px, 1fr));
+    gap: 30px 10px;
+    justify-content: center;
+}
+
+.CTA__button {
+    width: 40%;
+}
+

assets/styles/pages/home/home.css

@@ -6,11 +6,16 @@
 5. Otros
 Metodologia => BEM
 */
+body {
+    background-color: var(--color-background);
+}
 
 /* Estilos al header */
 .header {
-    min-width: 320px;
-    padding: 0 20px;
+    width: 90%;
+    margin: 0 auto;
+    min-width: 310px;
+    /* padding: 0 20px; */
     padding-bottom: 30px;
     background-color: var(--color-background);
 }
@@ -173,6 +178,7 @@ Metodologia => BEM
 
 .hero__img {
     width: 100%;
+    height: 100%;
 }
 
 .hero__CTA {
@@ -190,11 +196,15 @@ Metodologia => BEM
 }
 
 .hero__button {
-    min-width: 200px;
+    display: block;
     border-radius: 40px;
-    padding: 10px 20px;
+    width: 200px;
+    height: 45px;
     text-decoration: none;
+    text-align: center;
     font-size: 1.4rem;
+    line-height: 45px;
+    margin: 0 auto;
     font-weight: 500;
     background-color: var(--color-primary-red);
     color: #FFF;
@@ -246,7 +256,7 @@ Metodologia => BEM
     min-width: 320px;
     text-align: center;
     padding: 33px 0;
-    background-color: var(--color-background);
+    /* background-color: var(--color-background); */
 }
 
 .recent-posts__title {

views/pages/home.php

@@ -6,7 +6,7 @@
     'pages/home/home.css',
 ) ?>
 <?php $desktop_styles = array(
-    array('pages/home/home-desktop.css', 'attributes' => 'media="(max-width: 720px)"'),
+    array('pages/home/home-desktop.css', 'attributes' => 'media="screen and (min-width: 600px)"'),
 ) ?>
 <?php $scripts = array(
     'home.js',
@@ -20,11 +20,13 @@
             <source srcset="<?= NABU_DIRECTORY['images'] ?>/hero-desktop.png" media="(min-width: 600px)">
             <img src="<?= NABU_DIRECTORY['images'] ?>/hero.png" alt="Imagen inspiración en cualquier momento y cualquier lugar" class="hero__img">
         </picture>
-        <h1 class="hero__CTA">Lee, inspírate y escribe</h1>
-        <p class="hero__secundary-CTA">
-            Lo mejor que puedes compartir es tu conocimiento.
-        </p>
-        <a href="<?= NABU_ROUTES['signup'] ?>" class="hero__button">Comienza a escribir</a>
+        <div class="hero__text-container">
+            <h1 class="hero__CTA">Lee, inspírate y escribe</h1>
+            <p class="hero__secundary-CTA">
+                Lo mejor que puedes compartir es tu conocimiento.
+            </p>
+            <a href="<?= NABU_ROUTES['signup'] ?>" class="hero__button">Comienza a escribir</a>
+        </div>
     </div>
 </header>