diff --git a/com.woltlab.wcf/templates/articleList.tpl b/com.woltlab.wcf/templates/articleList.tpl
index 578ed16b905..9ebf29e9c68 100644
--- a/com.woltlab.wcf/templates/articleList.tpl
+++ b/com.woltlab.wcf/templates/articleList.tpl
@@ -39,7 +39,7 @@
 
 {include file='header'}
 
-<div class="section">
+<div class="section entryCardList__container">
 	{unsafe:$listView->render()}
 </div>
 
diff --git a/com.woltlab.wcf/templates/articleListItems.tpl b/com.woltlab.wcf/templates/articleListItems.tpl
index ea1ed7e9c7d..63a2da354af 100644
--- a/com.woltlab.wcf/templates/articleListItems.tpl
+++ b/com.woltlab.wcf/templates/articleListItems.tpl
@@ -2,8 +2,8 @@
 
 {foreach from=$view->getItems() item='article' name='articles'}
 	{if $article->getArticleContent()}
-	<article class="contentItem contentItemMultiColumn listView__item" data-object-id="{$article->getObjectID()}">
-		<div class="contentItemOptions">
+	<article class="entryCardList__item listView__item" data-object-id="{$article->getObjectID()}">
+		<div class="entryCardList__item__buttons">
 			{if $view->hasBulkInteractions()}
 				<label class="button small jsTooltip" title="{lang}wcf.clipboard.item.mark{/lang}">
 					<input type="checkbox" class="listView__selectItem" aria-label="{lang}wcf.clipboard.item.mark{/lang}">
@@ -12,69 +12,72 @@
 
 			{unsafe:$view->renderInteractionContextMenuButton($article)}
 		</div>
-		
-		<div class="contentItemLink">
-			<div class="contentItemImage contentItemImageLarge">
-				<img
-					class="contentItemImageElement"
-					src="{if $article->getTeaserImage()}{$article->getTeaserImage()->getThumbnailLink('medium')}{else}{$__wcf->getStyleHandler()->getStyle()->getCoverPhotoURL()}{/if}"
-					height="{if $article->getTeaserImage()}{@$article->getTeaserImage()->getThumbnailHeight('medium')}{else}{@$__wcf->getStyleHandler()->getStyle()->getCoverPhotoHeight()}{/if}"
-					width="{if $article->getTeaserImage()}{@$article->getTeaserImage()->getThumbnailWidth('medium')}{else}{@$__wcf->getStyleHandler()->getStyle()->getCoverPhotoWidth()}{/if}"
-					loading="lazy"
-					alt="">
-				
-				{hascontent}
-					<div class="contentItemBadges">
-						{content}
-							{if $article->isDeleted}<span class="badge label red contentItemBadge contentItemBadgeIsDeleted">{lang}wcf.message.status.deleted{/lang}</span>{/if}
-							{if !$article->isPublished()}<span class="badge label green contentItemBadge contentItemBadgeIsDisabled">{lang}wcf.message.status.disabled{/lang}</span>{/if}
-							{if $article->isNew()}<span class="badge label contentItemBadge contentItemBadgeNew">{lang}wcf.message.new{/lang}</span>{/if}
-							
-							{event name='contentItemBadges'}
-						{/content}
-					</div>
-				{/hascontent}
-			</div>
-			
-			<div class="contentItemContent">
-				{if $article->hasLabels()}
-					<div class="contentItemLabels">
-						{foreach from=$article->getLabels() item=label}
-							{@$label->render('contentItemLabel')}
-						{/foreach}
-					</div>
-				{/if}
-				
-				<h2 class="contentItemTitle"><a href="{$article->getLink()}" class="contentItemTitleLink">{$article->getTitle()}</a></h2>
-				
-				<div class="contentItemDescription">
-					{@$article->getFormattedTeaser()}
+
+		<div class="entryCardList__item__image">
+			<img
+				class="entryCardList__item__image__element"
+				src="{if $article->getTeaserImage()}{$article->getTeaserImage()->getThumbnailLink('medium')}{else}{$__wcf->getStyleHandler()->getStyle()->getCoverPhotoURL()}{/if}"
+				height="{if $article->getTeaserImage()}{$article->getTeaserImage()->getThumbnailHeight('medium')}{else}{$__wcf->getStyleHandler()->getStyle()->getCoverPhotoHeight()}{/if}"
+				width="{if $article->getTeaserImage()}{$article->getTeaserImage()->getThumbnailWidth('medium')}{else}{$__wcf->getStyleHandler()->getStyle()->getCoverPhotoWidth()}{/if}"
+				loading="lazy"
+				alt=""
+			>
+
+			{hascontent}
+				<div class="entryCardList__item__badges">
+					{content}
+						{if $article->isDeleted}<span class="badge red">{lang}wcf.message.status.deleted{/lang}</span>{/if}
+						{if !$article->isPublished()}<span class="badge green">{lang}wcf.message.status.disabled{/lang}</span>{/if}
+						{if $article->isNew()}<span class="badge">{lang}wcf.message.new{/lang}</span>{/if}
+						
+						{event name='contentItemBadges'}{* deprecated: use badges instead *}
+						{event name='badges'}
+					{/content}
 				</div>
+			{/hascontent}
+		</div>
+
+		<div class="entryCardList__item__content">
+			{if $article->hasLabels()}
+				<ul class="entryCardList__item__labels labelList">
+					{foreach from=$article->getLabels() item=label}
+						<li>{unsafe:$label->render()}</li>
+					{/foreach}
+				</ul>
+			{/if}
+			
+			<h2 class="entryCardList__item__title">
+				<a href="{$article->getLink()}" class="entryCardList__item__link">{$article->getTitle()}</a>
+			</h2>
+
+			<div class="entryCardList__item__teaser">
+				{unsafe:$article->getFormattedTeaser()}
 			</div>
 		</div>
-		
-		<div class="contentItemMeta">
-			<span class="contentItemMetaImage">
-				{@$article->getUserProfile()->getAvatar()->getImageTag(32)}
-			</span>
+
+		<div class="entryCardList__item__meta">
+			<div class="entryCardList__item__meta__image">
+				{unsafe:$article->getUserProfile()->getAvatar()->getImageTag(32)}
+			</div>
 			
-			<div class="contentItemMetaContent">
-				<div class="contentItemMetaAuthor">
-					{@$article->getUserProfile()->getFormattedUsername()}
+			<div class="entryCardList__item__meta__content">
+				<div class="entryCardList__item__meta__author">
+					{unsafe:$article->getUserProfile()->getFormattedUsername()}
 				</div>
-				<div class="contentItemMetaTime">
-					{@$article->time|time}
+				
+				<div class="entryCardList__item__meta__time">
+					{time time=$article->time}
 				</div>
 			</div>
-			
-			<div class="contentItemMetaIcons">
+
+			<div class="entryCardList__item__meta__icons">
 				{if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike') && $article->cumulativeLikes}
-					<div class="contentItemMetaIcon">
+					<div class="entryCardList__item__meta__icon">
 						{include file='shared_topReaction' cachedReactions=$article->cachedReactions render='short'}
 					</div>
 				{/if}
 				{if $article->getDiscussionProvider()->getDiscussionCountPhrase()}{* empty phrase indicates that comments are disabled *}
-					<div class="contentItemMetaIcon">
+					<div class="entryCardList__item__meta__icon">
 						{icon name='comments'}
 						<span aria-label="{$article->getDiscussionProvider()->getDiscussionCountPhrase()}">
 							{$article->getDiscussionProvider()->getDiscussionCount()}
@@ -82,7 +85,8 @@
 					</div>
 				{/if}
 
-				{event name='contentItemMetaIcons'}
+				{event name='contentItemMetaIcons'}{* deprecated: use badges instead *}
+				{event name='metaIcons'}
 			</div>
 		</div>
 	</article>
@@ -91,38 +95,38 @@
 	{if MODULE_WCF_AD && !$disableAds}
 		{if $tpl[foreach][articles][iteration] === 1}
 			{hascontent}
-				<div class="contentItem contentItemAd">
-					{content}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.article.after1stArticle')}{/content}
+				<div class="entryCardList__item entryCardList__item--ad">
+					{content}{unsafe:$__wcf->getAdHandler()->getAds('com.woltlab.wcf.article.after1stArticle')}{/content}
 				</div>
 			{/hascontent}
 		{else}
 			{if $tpl[foreach][articles][iteration] % 2 === 0}
 				{hascontent}
-					<div class="contentItem contentItemAd">
-						{content}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.article.afterEvery2ndArticle')}{/content}
+					<div class="entryCardList__item entryCardList__item--ad">
+						{content}{unsafe:$__wcf->getAdHandler()->getAds('com.woltlab.wcf.article.afterEvery2ndArticle')}{/content}
 					</div>
 				{/hascontent}
 			{/if}
 			
 			{if $tpl[foreach][articles][iteration] % 3 === 0}
 				{hascontent}
-					<div class="contentItem contentItemAd">
-						{content}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.article.afterEvery3rdArticle')}{/content}
+					<div class="entryCardList__item entryCardList__item--ad">
+						{content}{unsafe:$__wcf->getAdHandler()->getAds('com.woltlab.wcf.article.afterEvery3rdArticle')}{/content}
 					</div>
 				{/hascontent}
 			{/if}
 			
 			{if $tpl[foreach][articles][iteration] % 5 === 0}
 				{hascontent}
-					<div class="contentItem contentItemAd">
-						{content}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.article.afterEvery5thArticle')}{/content}
+					<div class="entryCardList__item entryCardList__item--ad">
+						{content}{unsafe:$__wcf->getAdHandler()->getAds('com.woltlab.wcf.article.afterEvery5thArticle')}{/content}
 					</div>
 				{/hascontent}
 				
 				{if $tpl[foreach][articles][iteration] % 10 === 0}
 					{hascontent}
-						<div class="contentItem contentItemAd">
-							{content}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.article.afterEvery10thArticle')}{/content}
+						<div class="entryCardList__item entryCardList__item--ad">
+							{content}{unsafe:$__wcf->getAdHandler()->getAds('com.woltlab.wcf.article.afterEvery10thArticle')}{/content}
 						</div>
 					{/hascontent}
 				{/if}
diff --git a/com.woltlab.wcf/templates/shared_listView.tpl b/com.woltlab.wcf/templates/shared_listView.tpl
index 0c24dd5e1fb..2693c51c21c 100644
--- a/com.woltlab.wcf/templates/shared_listView.tpl
+++ b/com.woltlab.wcf/templates/shared_listView.tpl
@@ -54,10 +54,10 @@
 		</div>
 	</div>
 
-	<div class="listView__footer">
+	<div class="listView__footer" id="{$view->getID()}_footer">
 		{if $view->hasBulkInteractions()}
 			<div id="{$view->getID()}_selectionBar" class="listView__selectionBar dropdown" hidden>
-				<button type="button" id="{$view->getID()}_bulkInteractionButton" class="button listView__bulkInteractionButton dropdownToggle"></button>
+				<button type="button" id="{$view->getID()}_bulkInteractionButton" class="button small listView__bulkInteractionButton dropdownToggle"></button>
 				<ul class="dropdownMenu">
 					<li class="disabled"><span>{lang}wcf.global.loading{/lang}</span></li>
 					<li class="dropdownDivider"></li>
diff --git a/ts/WoltLabSuite/Core/Component/ListView/Selection.ts b/ts/WoltLabSuite/Core/Component/ListView/Selection.ts
index 3b4551987b6..a65dcb45526 100644
--- a/ts/WoltLabSuite/Core/Component/ListView/Selection.ts
+++ b/ts/WoltLabSuite/Core/Component/ListView/Selection.ts
@@ -168,6 +168,8 @@ export class Selection extends EventTarget {
       return;
     }
 
+    this.dispatchEvent(new CustomEvent("list-view:update-selection"));
+
     if (selectedIds.length === 0) {
       this.#selectionBar.hidden = true;
       return;
@@ -284,6 +286,7 @@ export class Selection extends EventTarget {
 
 interface SelectionEventMap {
   "list-view:get-bulk-interactions": CustomEvent<{ objectIds: number[] }>;
+  "list-view:update-selection": CustomEvent<void>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
diff --git a/ts/WoltLabSuite/Core/Component/ListView/State.ts b/ts/WoltLabSuite/Core/Component/ListView/State.ts
index 8a588a6a5c3..b7434352876 100644
--- a/ts/WoltLabSuite/Core/Component/ListView/State.ts
+++ b/ts/WoltLabSuite/Core/Component/ListView/State.ts
@@ -24,6 +24,7 @@ export class State extends EventTarget {
   readonly #pagination: WoltlabCorePaginationElement;
   readonly #selection: Selection;
   readonly #sorting: Sorting;
+  readonly #listViewFooter: HTMLElement;
   #pageNo: number;
 
   constructor(
@@ -39,6 +40,8 @@ export class State extends EventTarget {
     this.#baseUrl = baseUrl;
     this.#pageNo = pageNo;
 
+    this.#listViewFooter = document.getElementById(`${viewId}_footer`) as HTMLElement;
+
     this.#pagination = document.getElementById(`${viewId}_pagination`) as WoltlabCorePaginationElement;
     this.#pagination.addEventListener("switchPage", (event: CustomEvent) => {
       void this.#switchPage(event.detail, StateChangeCause.Pagination);
@@ -60,12 +63,16 @@ export class State extends EventTarget {
         new CustomEvent("list-view:get-bulk-interactions", { detail: { objectIds: event.detail.objectIds } }),
       );
     });
+    this.#selection.addEventListener("list-view:update-selection", () => {
+      this.#updateListViewFooter();
+    });
 
     window.addEventListener("popstate", () => {
       this.#handlePopState();
     });
 
     this.#updatePaginationUrl();
+    this.#updateListViewFooter();
   }
 
   getPageNo(): number {
@@ -97,6 +104,8 @@ export class State extends EventTarget {
     if (cause === StateChangeCause.Change || cause === StateChangeCause.Pagination) {
       this.#updateQueryString();
     }
+
+    this.#updateListViewFooter();
   }
 
   #switchPage(pageNo: number, source: StateChangeCause): void {
@@ -176,6 +185,10 @@ export class State extends EventTarget {
     this.#switchPage(pageNo, StateChangeCause.History);
   }
 
+  #updateListViewFooter(): void {
+    this.#listViewFooter.hidden = this.#pagination.count < 2 && this.#selection.getSelectedIds().length === 0;
+  }
+
   setBulkInteractionContextMenuOptions(options: string): void {
     this.#selection.setBulkInteractionContextMenuOptions(options);
   }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/Selection.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/Selection.js
index 37e5490299b..985954b8796 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/Selection.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/Selection.js
@@ -142,6 +142,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Core", "WoltLabSuite/C
             if (!this.#selectionBar) {
                 return;
             }
+            this.dispatchEvent(new CustomEvent("list-view:update-selection"));
             if (selectedIds.length === 0) {
                 this.#selectionBar.hidden = true;
                 return;
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/State.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/State.js
index 3253c8acf92..6be57cf37ad 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/State.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/State.js
@@ -20,11 +20,13 @@ define(["require", "exports", "tslib", "./Filter", "./Selection", "./Sorting"],
         #pagination;
         #selection;
         #sorting;
+        #listViewFooter;
         #pageNo;
         constructor(viewId, viewElement, pageNo, baseUrl, sortField, sortOrder) {
             super();
             this.#baseUrl = baseUrl;
             this.#pageNo = pageNo;
+            this.#listViewFooter = document.getElementById(`${viewId}_footer`);
             this.#pagination = document.getElementById(`${viewId}_pagination`);
             this.#pagination.addEventListener("switchPage", (event) => {
                 void this.#switchPage(event.detail, 2 /* StateChangeCause.Pagination */);
@@ -41,10 +43,14 @@ define(["require", "exports", "tslib", "./Filter", "./Selection", "./Sorting"],
             this.#selection.addEventListener("list-view:get-bulk-interactions", (event) => {
                 this.dispatchEvent(new CustomEvent("list-view:get-bulk-interactions", { detail: { objectIds: event.detail.objectIds } }));
             });
+            this.#selection.addEventListener("list-view:update-selection", () => {
+                this.#updateListViewFooter();
+            });
             window.addEventListener("popstate", () => {
                 this.#handlePopState();
             });
             this.#updatePaginationUrl();
+            this.#updateListViewFooter();
         }
         getPageNo() {
             return this.#pageNo;
@@ -69,6 +75,7 @@ define(["require", "exports", "tslib", "./Filter", "./Selection", "./Sorting"],
             if (cause === 0 /* StateChangeCause.Change */ || cause === 2 /* StateChangeCause.Pagination */) {
                 this.#updateQueryString();
             }
+            this.#updateListViewFooter();
         }
         #switchPage(pageNo, source) {
             this.#pagination.page = pageNo;
@@ -128,6 +135,9 @@ define(["require", "exports", "tslib", "./Filter", "./Selection", "./Sorting"],
             this.#sorting.updateFromSearchParams(searchParams);
             this.#switchPage(pageNo, 1 /* StateChangeCause.History */);
         }
+        #updateListViewFooter() {
+            this.#listViewFooter.hidden = this.#pagination.count < 2 && this.#selection.getSelectedIds().length === 0;
+        }
         setBulkInteractionContextMenuOptions(options) {
             this.#selection.setBulkInteractionContextMenuOptions(options);
         }
diff --git a/wcfsetup/install/files/lib/system/listView/user/ArticleListView.class.php b/wcfsetup/install/files/lib/system/listView/user/ArticleListView.class.php
index bc953b8db4a..647759f0be0 100644
--- a/wcfsetup/install/files/lib/system/listView/user/ArticleListView.class.php
+++ b/wcfsetup/install/files/lib/system/listView/user/ArticleListView.class.php
@@ -55,7 +55,7 @@ public function __construct()
         $this->setItemsPerPage(\ARTICLES_PER_PAGE);
         $this->setSortField('time');
         $this->setSortOrder(\ARTICLE_SORT_ORDER);
-        $this->setCssClassName('contentItemList');
+        $this->setCssClassName('entryCardList');
     }
 
     #[\Override]
diff --git a/wcfsetup/install/files/lib/system/tagging/TaggableArticle.class.php b/wcfsetup/install/files/lib/system/tagging/TaggableArticle.class.php
index fde136792f4..9822d0be770 100644
--- a/wcfsetup/install/files/lib/system/tagging/TaggableArticle.class.php
+++ b/wcfsetup/install/files/lib/system/tagging/TaggableArticle.class.php
@@ -22,4 +22,10 @@ public function getListView(array $tagIDs): ArticleListView
     {
         return new TaggedArticleListView($tagIDs);
     }
+
+    #[\Override]
+    public function getContainerCssClassName(): string
+    {
+        return 'entryCardList__container';
+    }
 }
diff --git a/wcfsetup/install/files/style/ui/entryCardList.scss b/wcfsetup/install/files/style/ui/entryCardList.scss
new file mode 100644
index 00000000000..a09ee80735c
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/entryCardList.scss
@@ -0,0 +1,169 @@
+.entryCardList__container {
+	container-type: inline-size;
+}
+
+.entryCardList {
+	display: grid;
+	gap: 20px;
+	grid-auto-rows: minmax(200px, auto);
+}
+
+@container (min-width: 1000px) {
+	.entryCardList {
+		grid-template-columns: repeat(3, 1fr);
+	}
+}
+
+@container (width < 1000px) and (min-width: 620px) {
+	.entryCardList {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+.entryCardList__item {
+	background-color: var(--wcfContentBackground);
+	border-radius: var(--wcfBorderRadius);
+	box-shadow: var(--wcfBoxShadowCard);
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	row-gap: 10px;
+}
+
+html[data-color-scheme="dark"] {
+	.entryCardList__item {
+		border: 1px solid var(--wcfContentBorderInner);
+	}
+}
+
+.entryCardList__item__buttons {
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	z-index: 1;
+	align-items: flex-start;
+	display: flex;
+	gap: 5px;
+}
+
+.entryCardList__item__image {
+	border-top-left-radius: var(--wcfBorderRadius);
+	border-top-right-radius: var(--wcfBorderRadius);
+	overflow: hidden;
+	position: relative;
+}
+
+.entryCardList__item__image__element {
+	height: 150px;
+	object-fit: cover;
+	object-position: center;
+	width: 100%;
+}
+
+html:not(.touch) .entryCardList__item__image__element {
+	transition: transform 0.24s linear;
+}
+
+html:not(.touch) .entryCardList__item:hover .entryCardList__item__image__element {
+	transform: scale(1.05);
+}
+
+.entryCardList__item__badges {
+	align-items: flex-start;
+	display: flex;
+	flex-direction: column;
+	left: 10px;
+	position: absolute;
+	top: 10px;
+	z-index: 1;
+}
+
+.entryCardList__item__content {
+	display: flex;
+	flex: 1 auto;
+	flex-direction: column;
+	padding: 10px;
+	row-gap: 10px;
+}
+
+.entryCardList__item__title {
+	color: var(--wcfContentHeadlineLink);
+
+	@include wcfFontHeadline;
+	@include wcfFontBold;
+}
+
+.entryCardList__item__link {
+	color: inherit;
+
+	&::before {
+		content: "";
+		inset: 0;
+		position: absolute;
+	}
+
+	&:hover,
+	&:focus {
+		color: inherit;
+	}
+}
+
+.entryCardList__item__teaser {
+	color: var(--wcfContentDimmedText);
+}
+
+.entryCardList__item__meta {
+	align-items: center;
+	border-top: 1px solid var(--wcfContentBorderInner);
+	color: var(--wcfContentDimmedText);
+	display: flex;
+	flex: 0 auto;
+	padding: 10px;
+	white-space: nowrap;
+	gap: 10px;
+
+	.icon {
+		color: inherit;
+	}
+}
+
+.entryCardList__item__meta__image {
+	flex: 0 auto;
+}
+
+.entryCardList__item__meta__content {
+	flex: 1 auto;
+
+	@include wcfFontSmall;
+}
+
+.entryCardList__item__meta__author {
+	color: var(--wcfContentText);
+
+	a,
+	a:hover {
+		color: inherit;
+	}
+}
+
+.entryCardList__item__meta__icons {
+	align-items: center;
+	display: flex;
+	flex: 0 auto;
+	gap: 10px;
+
+	@include wcfFontSmall;
+}
+
+.entryCardList__item__meta__icon {
+	flex: 0 auto;
+
+	.topReactionShort {
+		align-items: center;
+		display: flex;
+	}
+
+	.reactionType {
+		margin-right: 3px;
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/listView.scss b/wcfsetup/install/files/style/ui/listView.scss
index d68bbbcef3d..3c183c55331 100644
--- a/wcfsetup/install/files/style/ui/listView.scss
+++ b/wcfsetup/install/files/style/ui/listView.scss
@@ -36,17 +36,38 @@
 }
 
 .listView__footer {
+	align-items: center;
 	background-color: var(--wcfContentContainerBackground);
 	bottom: 0;
 	display: flex;
 	gap: 10px;
+	margin-top: 20px;
+	min-height: 54px;
+	padding-top: 10px;
+	padding-bottom: 10px;
 	position: sticky;
 	z-index: 2;
 }
 
+@include screen-sm-down {
+	.listView__footer {
+		margin-left: -10px;
+		margin-right: -10px;
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+}
+
+@include screen-md-up {
+	.listView__footer {
+		margin-left: -20px;
+		margin-right: -20px;
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+}
+
 .listView__pagination {
-	margin-top: 10px;
-	margin-bottom: 10px;
 	margin-inline-start: auto;
 }