separa el slider en dos

src/app.css

@@ -1,5 +1,8 @@
 @import '@fontsource/fira-mono';
-@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@300;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');
+
 
 * {
 	margin: 0;

src/lib/Asesoramiento.svelte

@@ -17,7 +17,8 @@
 <style>
   .content {
     min-height: 10rem;
-    background: #ddd;
+    background: firebrick;
+    color: white;
     margin: 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -41,7 +42,7 @@
     font-size: 1.2rem;
     line-height: 2.4rem;
     margin-bottom: 1rem;
-    font-family: 'Comfortaa', cursive;
+    font-family: 'Azeret Mono', cursive;
     text-transform: uppercase;
     font-weight: 500;
     text-align: center;
@@ -50,7 +51,7 @@
 
   p {
     font-size: 1.3rem;
-    color: firebrick;
+    color: white;
     font-weight: 500;
     margin-bottom: 1rem;
   }

src/lib/Header/CenterHeader.svelte

@@ -0,0 +1,107 @@
+<script></script>
+
+<header>
+  <div class="logo">
+    <img alt="Logo de la asociación Derecho a Morir Dignamente" src="https://derechoamorir.org/wp-content/uploads/2018/01/logo_sineslogan_web_72pp_transparente.png">
+  </div>
+  <div class="hamburger">
+  <svg viewBox="0 0 100 80" width="40" height="40">
+    <rect width="100" height="12"></rect>
+    <rect y="30" width="100" height="12"></rect>
+    <rect y="60" width="100" height="12"></rect>
+  </svg>
+</div>
+  <nav>
+    <ul>
+      <li>^</li>
+      <li>Conócenos</li>
+      <li>Tus derechos</li>
+      <li>Grupos</li>
+      <li>Comunicación</li>
+      <li>Contacto</li>
+      <li>Eventos</li>
+      <li class="menu-highlight">Asóciate</li>
+    </ul>
+    <div class="menumobile"> = </div>
+  </nav>
+</header>
+
+<style>
+  .hamburger {
+    width: 64px;
+    align-self: center;
+    cursor: pointer;
+  }
+  header {
+  width: 100%;
+  background: white;
+  height: 6rem;
+  padding: 1rem;
+  display: grid;
+  grid-template-columns: 64px 1fr 64px;
+  grid-auto-flow: dense;
+  grid-gap: 4rem;
+  align-items: end;
+  z-index: 50;
+}
+
+header .logo {
+  grid-column: 2/3;
+  justify-self: center;
+}
+
+header .logo img {
+  max-width: 150px;
+}
+nav {
+  display: none;
+}
+nav ul {
+  grid-column: 1/2;
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+}
+nav li {
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  padding: 4px 0;
+}
+
+.menu-highlight {
+  color: white;
+  background: firebrick;
+  box-shadow: -8px 0 0 0 firebrick, 8px 0 0 0 firebrick;
+}
+
+.menumobile {
+  display: none;
+}
+@media (max-width: 768px) {
+  header {
+    grid-template-columns: 1fr 30vw;
+    grid-gap: 2rem;
+    height: auto;
+    padding: 8px;
+    align-items: end;
+    width: 100%;
+  }
+  header .logo {
+    display: grid;
+    align-items: end;
+  }
+  header .logo img {
+    max-width: 30vw;
+  }
+  nav ul {
+    display: none;
+  }
+  .menumobile {
+    display: block;
+    font-size: 3rem;
+  }
+}
+</style>
+

src/lib/Slider.svelte

@@ -5,17 +5,18 @@
 <div class="slider">
   <div class="slider-image">
     <picture>
-      <source srcset="slider01-test-500w.jpg" media="(max-width: 768px)">
-      <source srcset="slider01-test-1108w.jpg">
-      <img srcset="slider01-test-1108w.jpg" alt="Globos de colores">
+      <source srcset="slider02-test-500.webp" media="(max-width: 768px)">
+      <source srcset="slider02-test-1140.webp">
+      <img srcset="slider01-test-1140.webp" alt="Globos de colores">
     </picture>
   </div>
+  <div class="ref">Revista 87</div>
   <div class="slider-content">
     <div class="slider-title">
-      Celebramos la ley de eutanasia
+      Todas las eutanasias
     </div>
     <div class="slider-text">
-      El 25 de junio, por la tarde, DMD organiza concentraciones en varias ciudades para celebrar la entrada en vigor de la ley de eutanasia. También pondremos mesas informativas para resolver dudas sobre la ley a quien lo necesite. ¡Apúntate!
+      En el primer año de la LORE se ha ayudado a morir a personas en situaciones que en otros países costaron años.
     </div>
   </div>
 </div>
@@ -28,28 +29,27 @@
   height: 500px;
   display: grid;
   justify-content: center;
-  z-index: 3;
+  z-index: 0;
   overflow: hidden;
+  grid-template-columns: 1fr 1fr;
 }
 .slider-image {
   max-height: 500px;
   z-index: 2;
+  grid-column: 1/2;
+  overflow: hidden;
   
 }
 .slider-image img {
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
+  object-fit: cover;
+  object-position: -480px bottom;
 }
 .slider-content {
   position: absolute;
-  bottom: calc(1rem);
+  bottom: 0;
   right: calc(1rem - 12px);
   width: 60%;
   height: auto; 
-  background: linear-gradient(120deg, rgba(179, 15, 29, 0.75) 0%, #B30F1D 100%);
   display: grid;
   align-content: center;
   justify-content: center;
@@ -59,17 +59,34 @@
 
 .slider-title {
   text-align: center;
-  font-size: 2rem;
+  font-size: 4rem;
   font-weight: 900;
-  text-transform: uppercase;
-  font-family: 'Open Sans', sans-serif;
-  color: #efefef;
+  font-family: 'Prata';
+  color: #fff;
+  line-height: 3.5rem;
+  text-shadow: 0 0 1.5rem rgba(124, 29, 29, 1);
 }
 
 .slider-text {
-  font-size: 1.2rem;
+  font-size: 1.5rem;
   margin-top: 1rem;
   color: white;
+  /* background: linear-gradient(180deg, rgba(179, 15, 29, 0) 10%, #B30F1Dcc 100%); */
+  /* background: rgba(178, 34, 34, 0.7 ); */
+  /* background: rgba(124, 58, 58,0.85); */
+  background: linear-gradient(140deg, rgba(124, 43, 43, 0.5) 0%, rgba(128, 29, 29, 0.8) 70%);
+  padding: 1rem;
+  border-radius: 8px;
+  font-family: 'Oswald';
+}
+
+.ref {
+  position: absolute;
+  top: 2rem;
+  left: 1rem;
+  color: firebrick;
+  font-size: 1rem;
+  z-index: 10;
 }
 
 @media (max-width: 768px) {
@@ -92,11 +109,16 @@
   }
 
   .slider-title {
-    font-size: 1.5rem;
+    font-size: 3.5rem;
   }
 
   .slider-text {
-    font-size: 1rem;
+    font-size: 1.5rem;
+    line-height: 1.8rem;
+    background: linear-gradient(140deg, rgba(124, 43, 43, 0.2) 0%, rgba(128, 29, 29, 0.9) 50%);
+  }
+  .ref {
+    top: 1rem;
   }
 }
 </style>

src/routes/__layout.svelte

@@ -1,5 +1,6 @@
 <script>
-	import Header from '$lib/Header/Header.svelte';
+	// import Header from '$lib/Header/OldHeader.svelte';
+	import Header from '$lib/Header/CenterHeader.svelte';
 	import '../app.css';
 </script>
 

src/routes/index.svelte

@@ -15,14 +15,17 @@ import Asesoramiento from "$lib/Asesoramiento.svelte";
 	<title>Asociación Derecho a Morir Dignamente</title>
 </svelte:head>
 
+<Slider />
+
 <section>
-	<Slider />
+	<Asesoramiento/>
 </section>
+
 <section>
 	<Highlights />
 </section>
 
-	<Asesoramiento/>
+
 
 <section>
 	<News />
@@ -35,11 +38,11 @@ import Asesoramiento from "$lib/Asesoramiento.svelte";
 <style>
 	section {
 		background: white;
-		padding: 1rem;
+		padding: 1rem 0;
 		display: block;
 		position: relative;
 		min-height: 6rem;
-		margin: 0 auto;
+		margin: 2rem auto;
 	}
 	footer {
 		min-height: 6rem;