diff --git a/src/components/BannerList/Banner.scss b/src/components/BannerList/Banner.scss
index 8370cc38..4777f4ba 100644
--- a/src/components/BannerList/Banner.scss
+++ b/src/components/BannerList/Banner.scss
@@ -3,39 +3,71 @@
 .bannerList {
   color: $primary;
   .card_item {
-    p {
-      text-align: justify;
-      margin: 0 !important;
+    h4 {
+      margin: 0;
     }
-    a{
+    a {
       color: inherit;
+      &:hover {
+        color: $secondary;
+      }
     }
     img {
+      margin: 0 10px 0 auto;
       width: 48px;
     }
   }
+  button {
+    margin-top: 10px;
+    @include primaryBtn;
+    align-self: baseline;
+    a {
+      color: inherit;
+    }
+  }
   &__title {
     display: flex;
     flex-direction: column;
     font-weight: 700;
     text-align: left;
-    button{
-      margin-top: 30px;
-      @include primaryBtn;
-      align-self: baseline;
-      a{
-        color: inherit;
+  }
+}
+
+@media screen and (min-width: $breakpoint-xl) {
+  .bannerList {
+    .card_item {
+      img {
+        width: 80px;
       }
     }
+    &__buttonMobile{
+      display: none;
+    }
   }
 }
 
-@media screen and (min-width: $breakpoint-xl) {
+@media screen and (max-width: $breakpoint-md) {
+  .bannerList {
+    &__buttonMobile{
+      margin-left: 1.5em;
+    }
+    &__title {
+      button {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: $breakpoint-md) {
   .bannerList {
     .card_item {
       img {
-        width: 70px;
+        width: 80px;
       }
     }
+    &__buttonMobile{
+      display: none;
+    }
   }
 }
diff --git a/src/components/BannerList/BannerLis.js b/src/components/BannerList/BannerLis.js
index 2c272821..b9a53530 100644
--- a/src/components/BannerList/BannerLis.js
+++ b/src/components/BannerList/BannerLis.js
@@ -4,19 +4,29 @@ import "./Banner.scss"
 
 export default function BannerLis({ data }) {
   const title = data?.title
-  const image = data?.Card[0]?.icon?.url
-  console.log(data)
   const cards = data?.Card.map(item => {
     return (
       <div className="card_item d-flex mb-4">
-        <div className="card_item col-3 mt-3 mt-xl-1">
-          <img class="mx-auto d-block" src={image} placeholder="blurred" />
-        </div>
-        <div className="card_item col-9 ps-2 pe-2">
-          <Link to={item.landing_page ? "/" + item.landing_page?.slug : null}>
-            <h4>{item.title}</h4>
-          </Link>
-          <p>{item.description}</p>
+        {item.icon && (
+          <div className="card_item col-3">
+            <img class="d-block" src={item.icon?.url} placeholder="blurred" />
+          </div>
+        )}
+        <div
+          style={!item.icon ? { marginLeft: "2em" } : {}}
+          className="card_item col-9 ps-2 pe-2"
+        >
+          {item.landing_page ? (
+            <Link to={"/" + item.landing_page?.slug}>
+              <h4>{item.title}</h4>
+              <p>{item.description}</p>
+            </Link>
+          ) : (
+            <>
+              <h4>{item.title}</h4>
+              <p>{item.description}</p>
+            </>
+          )}
         </div>
       </div>
     )
@@ -24,8 +34,7 @@ export default function BannerLis({ data }) {
 
   return (
     <div className="container py-5" id={data.strapi_component + "-" + data.id}>
-      <div className="bannerList d-md-flex flex-row-reverse">
-        <div className="bannerList__cards col-md-6 col-xl-6 pe-5">{cards}</div>
+      <div className="bannerList d-md-flex flex-row">
         <h1 className="bannerList__title col-md-6 col-xl-6 align-self-center ps-4 mb-4">
           {title}
           {data.contactForm && (
@@ -34,6 +43,15 @@ export default function BannerLis({ data }) {
             </button>
           )}
         </h1>
+        <div className="bannerList__cards col-md-6 col-xl-6 pe-5">{cards}
+        
+        </div>
+        {data.contactForm && (
+            <button className="bannerList__buttonMobile">
+              <a href={"#" + data.concactFormAnchor}>Contactanos</a>
+            </button>
+          )}
+        
       </div>
     </div>
   )
diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index 719e0d0f..2ac12e3b 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -37,7 +37,7 @@ const ListItem = ({ index, onClick, data }) => {
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent">
             <div className="listItem-more">
-              <h4>{data.title}</h4>
+              <h5>{data.title}</h5>
             </div>
             <Flipped
               flipId={`avatar-${index}`}
@@ -69,7 +69,7 @@ const ExpandedListItem = ({ index, data, isFirst }) => {
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent-expanded">
             <div className="listItem-more-expanded">
-              <p></p>
+              <h5>{data.title}</h5>
             </div>
             <Flipped
               flipId={`avatar-${index}`}
@@ -78,15 +78,14 @@ const ExpandedListItem = ({ index, data, isFirst }) => {
             >
               <img alt="" src={data.image?.url} className="avatar-expanded" />
             </Flipped>
-            <div
-            
-              className={"additional-content "}
-            >
-              <div style={isFirst ? {opacity: "1"} : {}}>
+            <div className={"additional-content "}>
+              <div style={isFirst ? { opacity: "1" } : {}}>
                 <h4>{data.title}</h4>
-                <MarkdownView markdown={data.text} />
+                <div className="additional-content-markdown">
+                  <MarkdownView markdown={data.text} />
+                </div>
                 {data.landing_page && (
-                  <Link to={"/" + data.landing_page.slug}>Ver más</Link>
+                  <Link to={"/" + data.landing_page?.slug}>Ver más</Link>
                 )}
               </div>
             </div>
diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss
index 5a31bae3..6011d3be 100644
--- a/src/components/expandGrid/expandGrid.scss
+++ b/src/components/expandGrid/expandGrid.scss
@@ -44,7 +44,7 @@
   cursor: pointer;
 
   @media screen and (max-width: $breakpoint-xxl) {
-    flex: 0 1 calc(calc(100% / 2) - 10px);
+    flex: 0 1 calc(calc(100% / 3) - 10px);
   }
 
   @media screen and (max-width: 890px) {
@@ -54,10 +54,6 @@
   &-expanded {
     @extend .listItem;
     flex-basis: 100%;
-
-    @media screen and (max-width: 890px) {
-      height: 800px;
-    }
   }
 }
 
@@ -66,7 +62,7 @@
   flex-direction: row;
   height: 100%;
   position: relative;
-  @media screen and (max-width: 890px) {
+  @media screen and (max-width: $breakpoint-xl) {
     flex-direction: column;
     align-items: unset;
   }
@@ -85,13 +81,21 @@
 
   &-expanded {
     @extend .avatar;
+    box-shadow: 0px 4px 4px 0px #00000040;
+
     flex-grow: 0;
     margin-right: 0;
     min-width: 33%;
     max-width: 33%;
-    @media screen and (max-width: 1500px) {
-      min-width: 50%;
-      max-width: 50%;
+    @media screen and (max-width: $breakpoint-xl) {
+      min-width: 100%;
+      max-width: 100%;
+      height: 400px;
+      object-fit: cover;
+    }
+    @media screen and (max-width: $breakpoint-md) {
+      height: unset;
+      object-fit: unset;
     }
   }
 }
@@ -107,6 +111,7 @@
 }
 
 .additional-content {
+  box-shadow: 0px 4px 4px 0px #00000040;
   width: 100%;
   overflow: hidden;
   @media screen and (max-width: 890px) {
@@ -114,7 +119,8 @@
   }
 }
 
-.listItem-more{
+
+.listItem-more {
   position: absolute;
   inset: 0 0 20px 20px;
   display: flex;
@@ -123,14 +129,17 @@
   transition: opacity 200ms ease;
   opacity: 1;
   color: black;
-  p{
+  width: 300px;
+  p {
     padding: 0;
     margin: 0;
   }
-  &-expanded{
+  &-expanded {
     @extend .listItem-more;
-    opacity: 0;
     padding: 0 !important;
+    @media screen and (max-width: $breakpoint-xl) {
+      display: none;
+    }
   }
 }
 
@@ -139,18 +148,16 @@
   border-radius: 3px;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  p {
-    max-height: 10vw;
+  &-markdown{
+    height: 80%;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
-  a{
+  a {
     font-weight: 600;
     color: $secondary;
     text-decoration: underline;
     margin: auto 0 10px 10px;
-  } 
+  }
   h4 {
     text-align: left;
   }