más cosas

src/app.css

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

src/lib/Asesoramiento.svelte

@@ -0,0 +1,81 @@
+<script></script>
+<div class="content">
+  <div class="preguntas">
+    <ul>
+      <li>¿Cómo evito el encarnizamiento terapéutico?</li>
+      <li>¿Cómo hago un testamento vital?</li>
+      <li>¿Cómo pido ayuda para morir?</li>
+
+    </ul>
+  </div>
+  <div class="formulario">
+    <p>Si tienes dudas sobre qué derechos sanitarios te amparan al final de la vida: </p>
+    <p>Escribe a <a href="mailto:informacion@derechoamorir.org">informacion@derechoamorir.org</a><br>o llama al <a href="tel:913691746">91-369-17-46</a></p>
+  </div>
+</div>
+
+<style>
+  .content {
+    min-height: 10rem;
+    background: #ddd;
+    margin: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    grid-gap: 2rem;
+    padding: 2rem 1rem;
+    /* margin-top: 16px;
+    margin-bottom: 16px; */
+    /* margin-left: calc(570px - 50vw);
+    margin-right: calc(570px - 50vw); */
+    margin-left: -16px;
+    margin-right: -16px;
+    /* border: 1px solid firebrick; */
+    box-shadow:0 0 8px rgba(0,0,0,0.3);
+  }
+
+  ul {
+    list-style: none;
+  }
+  li {
+    font-size: 1.2rem;
+    line-height: 2.4rem;
+    margin-bottom: 1rem;
+    font-family: 'Comfortaa', cursive;
+    text-transform: uppercase;
+    font-weight: 500;
+    text-align: center;
+    color: #222;
+  }
+
+  p {
+    font-size: 1.3rem;
+    color: firebrick;
+    font-weight: 500;
+    margin-bottom: 1rem;
+  }
+  a {
+    text-decoration: none;
+    color: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    font-family: 'Fira Code', monospace;
+    box-shadow:inset 0 -2px 0 0 rgba(179,15,29,1);
+    transition: 150ms ease-in-out;
+  }
+  a:hover {
+    box-shadow: inset 0 -12px 0 0 rgba(179,15,29,0.1);
+  }
+
+  .formulario {
+    padding: 1rem;
+    text-align: center;
+  }
+
+  @media (max-width: 768px) {
+    .content {
+      grid-template-columns: 1fr;
+      grid-gap: 1rem;
+    }
+  }
+</style>

src/lib/Highlights.svelte

@@ -60,9 +60,10 @@
   }
   .container {
     display: grid;
-    grid-template-columns: 4fr 3fr 2fr;
+    grid-template-columns: 1fr 1fr 1fr;
     grid-gap: 1rem;
     min-height: 150px;
+    margin-bottom: 2rem;
   }
 
   .highlight {
@@ -76,7 +77,7 @@
   .highlight picture {
     position: absolute;
     bottom: 0;
-    right: 0;
+    right: 50%;
     z-index: 0;
     width: 100%;
     opacity: 30%;
@@ -105,10 +106,10 @@
   }
 
   .eutanasia .card {
-    background: linear-gradient(120deg, #006e7fcc 0%, #006e7fff 100%);
+    background: linear-gradient(120deg, #006e7f11 0%, #006e7fff 100%);
   } 
   .testamento-vital .card {
-    background: linear-gradient(120deg, #e08115cc 0%, #e08115 100%);
+    background: linear-gradient(120deg, #e0811511 0%, #e08115 100%);
   }
 
   .asociate .card {

src/lib/Slider.svelte

@@ -5,9 +5,9 @@
 <div class="slider">
   <div class="slider-image">
     <picture>
-      <source srcset="globos-500w.jpg" media="(max-width: 768px)">
+      <source srcset="slider01-test-500w.jpg" media="(max-width: 768px)">
-      <source srcset="globos-1108w.jpg">
+      <source srcset="slider01-test-1108w.jpg">
-      <img srcset="globos-1108w.jpg" alt="Globos de colores">
+      <img srcset="slider01-test-1108w.jpg" alt="Globos de colores">
     </picture>
   </div>
   <div class="slider-content">

src/routes/index.svelte

@@ -7,6 +7,7 @@ import Footer from "$lib/Footer.svelte";
 import Slider from '$lib/Slider.svelte'
 import Highlights from '$lib/Highlights.svelte'
 import News from "$lib/News.svelte";
+import Asesoramiento from "$lib/Asesoramiento.svelte";
 
 </script>
 
@@ -20,6 +21,9 @@ import News from "$lib/News.svelte";
 <section>
 	<Highlights />
 </section>
+
+	<Asesoramiento/>
+
 <section>
 	<News />
 </section>