diff --git a/projects/public-search/src/app/document-brief/document-brief.component.html b/projects/public-search/src/app/document-brief/document-brief.component.html
index 34bbcbe2b..5bea91762 100644
--- a/projects/public-search/src/app/document-brief/document-brief.component.html
+++ b/projects/public-search/src/app/document-brief/document-brief.component.html
@@ -15,63 +15,52 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<article *ngIf="record" class="card flex-row border-0">
-  <shared-thumbnail
-    class="col-sm-2"
-    [record]="record"
-    isSmall="true">
-  </shared-thumbnail>
-  <div class="card-body w-100 py-0">
-    <h4 class="card-title mb-1">
+<article *ngIf="record" class="row">
+  <shared-thumbnail [record]="record" [isSmall]="true" class="col-sm-12 col-md-4 col-lg-2"></shared-thumbnail>
+  <div class="col-sm-12 col-md-8 col-lg-10">
+    <!-- document title -->
+    <h4 class="mb-1">
       <a name="document-title" target="_self" [href]="detailUrl.link">{{ record.metadata.ui_title_text }}</a>
     </h4>
-    <article class="card-text">
-      <!-- contribution -->
-      <ul class="list-inline mb-0" *ngIf="record.metadata.contribution && record.metadata.contribution.length > 0">
-        <li
-            class="list-inline-item"
-            *ngFor="let contribution of record.metadata.contribution.slice(0,3); let last = last; let i = index"
-          >
-          <span *ngIf="!contribution.agent.pid; else contribLink">
-            {{ contribution | contributionFormat }}
-          </span>
-          <ng-template #contribLink>
-          <a
-            *ngIf="contribution.agent.pid"
-            href="/{{ viewcode }}/{{ contribution.agent.type | contributionType }}/{{ contribution.agent.pid }}"
-          >
+    <!-- contributions -->
+    <ul class="list-inline mb-0" *ngIf="record.metadata.contribution && record.metadata.contribution.length > 0">
+      <li *ngFor="let contribution of record.metadata.contribution.slice(0,3); let last = last; let i = index"
+          class="list-inline-item">
+        <ng-container *ngIf="!contribution.agent.pid; else contribLink">
+          {{ contribution | contributionFormat }}
+        </ng-container>
+        <ng-template #contribLink>
+          <a *ngIf="contribution.agent.pid"
+             href="/{{ viewcode }}/{{ contribution.agent.type | contributionType }}/{{ contribution.agent.pid }}">
             {{ contribution | contributionFormat }}
           </a>
-          </ng-template>
-          {{ last ? '' : '; ' }}
-          {{ last && record.metadata.contribution.length > 3 ? '; …' : '' }}
-        </li>
-      </ul>
-
-      <!-- provision activity publications -->
-      <ul class="list-unstyled" *ngIf="provisionActivityPublications.length > 0">
-        <li *ngFor="let publication of provisionActivityPublications">{{ publication.value }}</li>
-      </ul>
-
-      <!-- explanation -->
-      <div *ngIf="record.explanation">
-        <a class="badge badge-info collapsed"
-            data-toggle="collapse" href="#{{'score'+record.metadata.pid }}"
-            aria-expanded="false">
-            score: {{ record.explanation.value }}
-        </a>
-        <pre class="collapse border border-secondary mt-1" id="{{'score'+record.metadata.pid }}">{{record.explanation|json}}</pre>
-      </div>
-
-      <!-- part of -->
-      <shared-part-of [record]="record" [viewcode]="viewcode" [isPublicView]="true"></shared-part-of>
-
-      <!-- availability -->
-      <div *ngIf="record.metadata.type !== 'ebook'">
-        <i class="fa fa-circle text-{{ record.metadata.available ? 'success' : 'danger' }}" aria-hidden="true"></i>&nbsp;
-        <span translate *ngIf="record.metadata.available">available</span>
-        <span translate *ngIf="!record.metadata.available">not available</span>
-      </div>
-    </article>
+        </ng-template>
+        {{ last ? '' : '; ' }}
+        {{ last && record.metadata.contribution.length > 3 ? '; …' : '' }}
+      </li>
+    </ul>
+    <!-- provision activity publications -->
+    <ul class="list-unstyled" *ngIf="provisionActivityPublications.length > 0">
+      <li *ngFor="let publication of provisionActivityPublications">{{ publication.value }}</li>
+    </ul>
+    <!-- explanation -->
+    <div *ngIf="record.explanation">
+      <a class="badge badge-info collapsed"
+         data-toggle="collapse" href="#{{ 'score' + record.metadata.pid }}"
+         aria-expanded="false">
+         score: {{ record.explanation.value }}
+      </a>
+      <pre class="collapse border border-secondary mt-1" id="{{ 'score' + record.metadata.pid }}">
+        {{ record.explanation | json }}
+      </pre>
+    </div>
+    <!-- part of -->
+    <shared-part-of [record]="record" [viewcode]="viewcode" [isPublicView]="true"></shared-part-of>
+    <!-- availability -->
+    <div *ngIf="record.metadata.type !== 'ebook'">
+      <i class="fa fa-circle text-{{ record.metadata.available ? 'success' : 'danger' }}" aria-hidden="true"></i>&nbsp;
+      <span translate *ngIf="record.metadata.available">available</span>
+      <span translate *ngIf="!record.metadata.available">not available</span>
+    </div>
   </div>
 </article>
diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss b/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss
index e5191bf66..59c66d514 100644
--- a/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss
+++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-figure, .thumb-brief img, .thumb-detail img {
+figure, .thumb-detail img {
   width: 100%;
   height: auto;
   max-height: 100%;