diff --git a/frappe/public/scss/page-builder.scss b/frappe/public/scss/page-builder.scss
index f7a1be395c..a2908e3725 100644
--- a/frappe/public/scss/page-builder.scss
+++ b/frappe/public/scss/page-builder.scss
@@ -140,7 +140,7 @@
 	}
 }
 
-.card {
+.section-with-cards .card {
 	@include transition();
 
 	&:hover {
diff --git a/frappe/website/web_template/section_with_cards/section_with_cards.html b/frappe/website/web_template/section_with_cards/section_with_cards.html
index 6a998dc6d4..647923c9b1 100644
--- a/frappe/website/web_template/section_with_cards/section_with_cards.html
+++ b/frappe/website/web_template/section_with_cards/section_with_cards.html
@@ -20,22 +20,24 @@
 </div>
 {%- endmacro -%}
 
-{%- if title -%}
-<h2 class="section-title">{{ title }}</h2>
-{%- endif -%}
-{%- if subtitle -%}
-<p class="section-description">{{ subtitle }}</p>
-{%- endif -%}
-{%- set card_size = card_size or 'Small' -%}
-<div class="{{ resolve_class({'mt-6': title}) }}">
-	<div class="row mt-n6">
-		{%- for index in ['1', '2', '3', '4', '5', '6', '7', '8', '9'] -%}
-		{%- set title = values['card_' + index + '_title'] -%}
-		{%- set content = values['card_' + index + '_content'] -%}
-		{%- set url = values['card_' + index + '_url'] -%}
-		{%- if title -%}
-		{{ card(title, content, url) }}
-		{%- endif -%}
-		{%- endfor -%}
+<div class="section-with-cards">
+	{%- if title -%}
+	<h2 class="section-title">{{ title }}</h2>
+	{%- endif -%}
+	{%- if subtitle -%}
+	<p class="section-description">{{ subtitle }}</p>
+	{%- endif -%}
+	{%- set card_size = card_size or 'Small' -%}
+	<div class="{{ resolve_class({'mt-6': title}) }}">
+		<div class="row mt-n6">
+			{%- for index in ['1', '2', '3', '4', '5', '6', '7', '8', '9'] -%}
+			{%- set title = values['card_' + index + '_title'] -%}
+			{%- set content = values['card_' + index + '_content'] -%}
+			{%- set url = values['card_' + index + '_url'] -%}
+			{%- if title -%}
+			{{ card(title, content, url) }}
+			{%- endif -%}
+			{%- endfor -%}
+		</div>
 	</div>
 </div>