diff --git a/src/components/Hero/Hero.js b/src/components/Hero/Hero.js
index d1912257..22151c2c 100644
--- a/src/components/Hero/Hero.js
+++ b/src/components/Hero/Hero.js
@@ -1,54 +1,27 @@
 import React from "react"
 import "./Hero.scss"
 
-export default function Hero({ data }) {
-    const title = data.title;
-    const richList = data.listAnimation;
-    const image = data.image.url;
-
-    const regexList = /(- )(.*)/g;
-
-    //Parametros en la funcion y validar el richText q acepte mas q h1
-    const processRichText = () => {
-        const processList = richList?.match(regexList)?.map(e => e.slice(2));
-        return [processList];
-
-    }
-
-    let [listOfWords] = processRichText();
-
-    return (
-        <>
-            <div className="hero" id={data.strapi_component + "-" + data.id}>
-                <div className="hero d-flex flex-column flex-xl-row-reverse justify-content-around">
-                    <div className="hero__image col-xl-7">
-                        <img
-                            src={image}
-                            placeholder="blurred"
-                        />
-                    </div>
-                    <div className="content-text d-flex align-self-center col-xl-5">
-                        <h1>{title}</h1>
-                        {listOfWords && (
-                            <div className="visible">
-                                <ul>
-                                    {listOfWords.map(word => <li>{word}</li>)};
-                                </ul>
-                            </div>
-                        )}
-
-                    </div>
-                </div>
-
-                {data.button && (
-                    <div className="hero__button">
-                        <a href={data.button.url} target="_blank" rel="noreferrer" >
-                            <button className="button-hero px-4">{data.button.content}</button>
-                        </a>
-                    </div>
-                )}
-            </div>
-        </>
-
-    )
+const Hero = ({
+  data: { title, listAnimation, subtitle, image, button, strapi_component, id },
+}) => {
+  return (
+    <div className="hero" id={strapi_component + "-" + id}>
+      <div className="hero-title">
+        <h1>{title}</h1>
+        <h3>{listAnimation || subtitle}</h3>
+        {button && (
+          <button>
+            <a href={button.url} target="_blank" rel="noreferrer">
+              {button.content}
+            </a>
+          </button>
+        )}
+      </div>
+      <div className="hero-img">
+        <img src={image?.url} alt="hero" />
+      </div>
+    </div>
+  )
 }
+
+export default Hero
diff --git a/src/components/Hero/Hero.scss b/src/components/Hero/Hero.scss
index 4c67d1f8..b7560648 100644
--- a/src/components/Hero/Hero.scss
+++ b/src/components/Hero/Hero.scss
@@ -1,226 +1,46 @@
 @import "../../styles/global.scss";
-
-@-webkit-keyframes change {
-  0% {
-    margin-top: 0;
-  }
-  15% {
-    margin-top: 0;
-  }
-  25% {
-    margin-top: -45px;
-  }
-  40% {
-    margin-top: -45px;
-  }
-  50% {
-    margin-top: -90px;
-  }
-  65% {
-    margin-top: -90px;
-  }
-  75% {
-    margin-top: -45px;
-  }
-  85% {
-    margin-top: -45px;
-  }
-  100% {
-    margin-top: 0;
-  }
-}
-
-@keyframes change {
-  0% {
-    margin-top: 0;
-  }
-  15% {
-    margin-top: 0;
-  }
-  25% {
-    margin-top: -45px;
-  }
-  40% {
-    margin-top: -45px;
-  }
-  50% {
-    margin-top: -90px;
-  }
-  65% {
-    margin-top: -90px;
-  }
-  75% {
-    margin-top: -45px;
-  }
-  85% {
-    margin-top: -45px;
-  }
-  100% {
-    margin-top: 0;
-  }
-}
-
-@-webkit-keyframes changeDesktop {
-  0% {
-    margin-top: 0;
-  }
-  15% {
-    margin-top: 0;
-  }
-  25% {
-    margin-top: -65px;
-  }
-  40% {
-    margin-top: -65px;
-  }
-  50% {
-    margin-top: -130px;
-  }
-  65% {
-    margin-top: -130px;
-  }
-  75% {
-    margin-top: -65px;
-  }
-  85% {
-    margin-top: -65px;
-  }
-  100% {
-    margin-top: 0;
-  }
-}
-
-@keyframes changeDesktop {
-  0% {
-    margin-top: 0;
-  }
-  15% {
-    margin-top: 0;
-  }
-  25% {
-    margin-top: -65px;
-  }
-  40% {
-    margin-top: -65px;
-  }
-  50% {
-    margin-top: -130px;
-  }
-  65% {
-    margin-top: -130px;
-  }
-  75% {
-    margin-top: -65px;
-  }
-  85% {
-    margin-top: -65px;
-  }
-  100% {
-    margin-top: 0;
-  }
-}
-
 .hero {
-  /*  background-image: url("../../images/Group.png");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  min-height: 700px; */
-
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  gap: 3em;
   button {
     @include primaryBtn;
-    margin-left: 150px;
+    margin-top: 20px;
   }
 
   .gatsby-image-wrapper {
     display: block;
   }
 
-  .content-text {
-    line-height: 45px;
-    height: 45px;
-    color: #333;
-    margin: 40px 0px;
-
-    .visible {
-      overflow: hidden;
-      height: 45px;
-    }
-
-    h1 {
-      margin: 0;
-    }
-
-    ul {
-      margin-top: 0;
-      text-align: left;
-      list-style: none;
-      animation: 6s linear 0s normal none infinite change;
-      -webkit-animation: 6s linear 0s normal none infinite change;
-      -moz-animation: 6s linear 0s normal none infinite change;
-      -o-animation: 6s linear 0s normal none infinite change;
-
-      li {
-        line-height: 45px;
-        margin: 0;
-        color: #8afe71;
-        font-size: 40px;
-        padding-left: 20px;
-        font-weight: $max-bold;
-
-        &:first-child {
-          color: #e8809a !important;
-        }
-
-        &:last-child {
-          color: #d047fa !important;
-        }
-      }
+  &-title{
+    padding: 0 0 0 10vw;
+    flex-basis: 45%;
+    h3{
+      font-weight: 400;
     }
   }
-}
 
-//estilos de 768 para arriba
-@media screen and (min-width: $breakpoint-md) {
-  .hero {
-    img {
-      height: 580px;
-      width: 600px;
-      margin-top: 50px;
+  &-img{
+    max-height: 80vh;
+    overflow: hidden;
+    flex-basis: 55%;
+    img{
+      width: 100%;
     }
   }
-}
-
-@media screen and (min-width: $breakpoint-lg) {
-  .hero {
-    .content-text {
-      line-height: 65px;
-      height: 65px;
-      margin-left: 100px;
 
-      h1 {
-        margin-left: 100px;
-      }
-      .visible {
-        height: 65px;
-      }
-      ul {
-        animation: 6s linear 0s normal none infinite changeDesktop;
-        -webkit-animation: 6s linear 0s normal none infinite changeDesktop;
-        -moz-animation: 6s linear 0s normal none infinite changeDesktop;
-        -o-animation: 6s linear 0s normal none infinite changeDesktop;
-
-        li {
-          font-size: 69px;
-          line-height: 65px;
-        }
-      }
-    }
-    &__button {
-      margin-top: -20px;
+  @media screen and (max-width: $breakpoint-xl) {
+    flex-direction: column-reverse;
+    &-img{
+      flex-basis: 100%;
     }
-    &__image {
-      padding-left: 100px;
+    &-title{
+      padding: 0 10vw;
+      flex-basis: 100%;
     }
   }
+
 }