search results page styling for desktop

wp-content/themes/workingnyc/views/partials/search-form.twig

@@ -1,12 +1,4 @@
 <form class="o-search__form w-full" style="max-width: var(--nyco-dimension-content-width)" action="/">
     <label class="label pb-1">{{__('Search for work or services', 'WNYC')}}</label>
-    <div class="input o-search__input rounded">
-        <input class="rounded border-0" data-js="search__input" tabindex="-1" inputmode="search" name="s" placeholder="Search" value="{{ s }}"></input>
-        <button type="submit" tabindex="-1" class="o-search__submit">
-            <svg class="icon-ui">
-                <title>{{__('Submit', 'WNYC')}}</title>
-            <use href="#lucide-search"></use>
-        </svg>
-        </button>
-    </div>
+    {% include 'partials/search-input.twig' %}
 </form>

wp-content/themes/workingnyc/views/partials/search-input.twig

@@ -0,0 +1,9 @@
+<div class="input o-search__input rounded" style="max-width: var(--nyco-dimension-content-width)">
+    <input class="rounded border-0" data-js="search__input" tabindex="-1" inputmode="search" name="s" placeholder="Search" value="{{ s }}"></input>
+    <button type="submit" tabindex="-1" class="o-search__submit">
+        <svg class="icon-ui">
+            <title>{{__('Submit', 'WNYC')}}</title>
+        <use href="#lucide-search"></use>
+    </svg>
+    </button>
+</div>

wp-content/themes/workingnyc/views/search.twig

@@ -1,44 +1,39 @@
 {% extends "base.twig" %}
 
 {% block content %}
-  <div class="bg-scale-2">
-    <main class="bg-scale-1" id="content">
-      <div class="layout-content">
-        <div class="page-max">
-          <header class="o-header">
-            <div class="w-full">
-              <div class="c-utility wrap">
-                <a class="link-icon mie-auto" href="{{ site.url }}">
-                  <svg aria-hidden="true" class="icon-ui rtl:flip">
-                    <use href="#lucide-chevron-left"></use>
-                  </svg>
+  <div class="bg-scale-4">
+      <header class="o-header block" style="padding: calc(var(--nyco-grid) * 12)">
+        <div class="c-utility p-0 min-h-0">
+          <a class="link-icon mie-auto" href="{{ site.url }}">
+            <svg aria-hidden="true" class="icon-ui rtl:flip">
+              <use href="#lucide-chevron-left"></use>
+            </svg>
 
-                  <span>{{ __('Home', 'WNYC') }}</span>
-                </a>
-              </div>
-            </div>
-            {% if term != '' %}
-              <div class="o-header__title">
-                <h1 id="page-heading" class="o-header__heading">{{__('Search results', 'WNYC')}}</h1>
-              </div>
-            {% endif %}
-          </header>
-          {% include 'partials/search-form.twig' %}
+            <span>{{ __('Home', 'WNYC') }}</span>
+          </a>
         </div>
-      </div>
-    </main>
+        {% if term != '' %}
+          <div class="o-header__title" style="margin-top: calc(var(--nyco-typography-margin-bottom) * 1.5);">
+            <h1 id="page-heading" class="o-header__heading">{{__('Search results', 'WNYC')}}</h1>
+          </div>
+        {% endif %}
+        {% include 'partials/search-input.twig' %}
+      </header>
   </div>
 
   {% if term != '' %}
-    <section class="page-max desktop:px-6">
+    <section class="desktop:px-6">
       <div class="wrap desktop:px-6">
         {% block list_sidebar %}
         {% endblock %}
       </div>
-      <div class="wrap desktop:px-6">
+      <div class="desktop:px-6">
         {% block before_list %}
+        <h2 class="text-p font-p inline-block my-4">
+          {{ __('Showing {{ TOTAL_VISIBLE }} results for "{{ TERM }}".')|replace({'{{ TOTAL_VISIBLE }}': posts|length, '{{ TERM }}': term}) }}
+        </h2>
         {% endblock %}
-        <div class="grid gap-3 tablet:grid-cols-2 desktop:gap-5 mb-3">
+        <div class="grid gap-3 desktop:grid-cols-2 mb-3">
           {% block post_list %}
             {% for post in posts %}
               {% if post.post_type == 'jobs' %}