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