diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index f66994c..fca2b56 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -618,7 +618,7 @@ figcaption {
   gap: 10px;
 }
 
-.section {
+.section-card {
   background-color: var(--background-1);
   color: var(--text-1);
   border-radius: 12px;
@@ -628,33 +628,33 @@ figcaption {
   justify-content: space-between;
 }
 
-.section:hover {
+.section-card:hover {
   background-color: var(--background-2);
   color: var(--text-2);
 }
 
-.section-title {
+.section-card-title {
   margin: 10px 0;
 }
 
-.section-anchor {
+.section-card-anchor {
   color: inherit;
 }
 
-.section-anchor:hover {
+.section-card-anchor:hover {
   text-decoration: none;
 }
 
-.section-description {
+.section-card-description {
   margin-bottom: 5px;
 }
 
-.section-arrow {
+.section-card-arrow {
   margin-block: auto;
   max-height: fit-content;
   float: right;
 }
-.section-arrow > .icon {
+.section-card-arrow > .icon {
   height: 48px;
   width: 48px;
 }
diff --git a/layouts/section.summary.html b/layouts/section.summary.html
index 4566b50..2ef895e 100644
--- a/layouts/section.summary.html
+++ b/layouts/section.summary.html
@@ -1,19 +1,19 @@
-<a class="section-anchor" href="{{ .Permalink }}">
-    <div class="section">
+<a class="section-card-anchor" href="{{ .Permalink }}">
+    <div class="section-card">
         <div>
-            <h2 class="section-title">
+            <h2 class="section-card-title">
                 {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
                 {{ .Title | markdownify }}
             </h2>
 
             {{ with .Summary }}
-                <div class="section-description">
+                <div class="section-card-description">
                     {{ . }}
                 </div>
             {{ end }}
         </div>
 
-        <div class="section-arrow">
+        <div class="section-card-arrow">
             {{ partial "icon.html" "arrow-right" }}
         </div>
     </div>