result search modular

user/themes/vocurations/scss/theme/_extensions.scss

@@ -144,7 +144,8 @@
 .search-results{
   .results{
     margin-top: 6rem;
-    display: inline-flex;
+    @include flexbox;
+    align-items: flex-end;
     width: 100%;
     .search-row{
       width: calc((100% / 12) * 6);
@@ -174,6 +175,7 @@
       .search-image{
         width: 100%;
         margin-top: 1.5rem;
+        margin-bottom: 1.5rem;
       }
     }
   }

user/themes/vocurations/scss/theme/_mobile.scss

@@ -184,6 +184,17 @@ h2{
     }
   }
 
+  .search-results{
+    .results{
+      display: block!important;
+      .search-row{
+        width: 100%!important;
+        padding: 0!important;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
 }
 
 @media screen and (max-width: 440px) {

user/themes/vocurations/templates/partials/simplesearch_item.html.twig

@@ -1,4 +1,43 @@
-<section class="search-row">
+{% if page.template == 'modular' %}
+
+  {% for item in page.collection %}
+
+
+      {% set value = query|hyphenize %}
+      {% set title = item.title|hyphenize %}
+
+      {% if title|contains(value) == 1  %}
+      <section class="search-row">
+
+        <a href="{{page.url}}">
+          {% set banner = item.media.images|first %}
+          <div class="search-item">
+              <div class="search-title">
+                {% include 'partials/blog/title.html.twig' with {title_level: 'h2', page: item} %}
+              </div>
+
+              <div class="search-details">
+                {% include 'partials/blog/date.html.twig' with {page: item} %}
+              </div>
+
+              {% if banner %}
+                <div class="search-image">
+                  {{banner.cropZoom(800, 500).sizes('(max-width:100vw) 100vw, 50vw').html(item.title, 'image article')}}
+                </div>
+              {% endif %}
+          </div>
+        </a>
+
+      </section>
+
+      {% endif %}
+
+
+  {% endfor %}
+
+{% else %}
+
+  <section class="search-row">
 
     <a href="{{page.url}}">
 
@@ -23,5 +62,6 @@
       </div>
 
     </a>
+  </section>
 
-</section>
+{% endif %}