fixed styling

theme/static/css/main.css

 :root {
 	--main-width: 90ch;
 	--header-height: 6rem;
-	--catcard-size: 20ch;
-	--catcard-row-num: 3;
+	--card-size: 20ch;
+	--card-row-num: 3;
 	--nav-height: 3rem;
 	--text-color: #333333;
 	--bg-color: #FFFFFF;
@@ -273,8 +273,8 @@ body > .nav-container {
 	:root {
 		--main-width: 70ch;
 		--header-height: 3rem;
-		--catcard-size: 30ch;
-		--catcard-row-num: 2;
+		--card-size: 30ch;
+		--card-row-num: 2;
 		--nav-height: 3rem;
 	}
 	body {
@@ -291,8 +291,8 @@ body > .nav-container {
 	:root {
 		--main-width: 60ch;
 		--header-height: 3rem;
-		--catcard-size: 30ch;
-		--catcard-row-num: 1;
+		--card-size: 30ch;
+		--card-row-num: 1;
 		--nav-height: 3rem;
 	}
 }
@@ -301,8 +301,8 @@ body > .nav-container {
 	:root {
 		--main-width: 50ch;
 		--header-height: 3rem;
-		--catcard-size: 30ch;
-		--catcard-row-num: 1;
+		--card-size: 30ch;
+		--card-row-num: 1;
 		--nav-height: 3rem;
 	}
 }
@@ -311,8 +311,8 @@ body > .nav-container {
 	:root {
 		--main-width: 40ch;
 		--header-height: 3rem;
-		--catcard-size: 35ch;
-		--catcard-row-num: 1;
+		--card-size: 35ch;
+		--card-row-num: 1;
 		--nav-height: 3rem;
 	}
 }
@@ -341,36 +341,36 @@ main iframe {
 	min-height: var(--main-width);
 }
 
-.catcards {
+.cards {
 	display: grid;
-	grid-template-columns: repeat(var(--catcard-row-num), var(--catcard-size));
-	/* grid-auto-rows: var(--catcard-size); */
-	grid-auto-rows: var(--catcard-size);
+	grid-template-columns: repeat(var(--card-row-num), var(--card-size));
+	/* grid-auto-rows: var(--card-size); */
+	grid-auto-rows: var(--card-size);
 	/*justify-content: space-between; */
 	column-gap: 0.2rem;
 	row-gap: 0.2rem;
 }
 
-.catcards li {
+.cards li {
 	display: inline-block;
 	list-style-type: none;
 	/* font-size: 125%; */
 }
-.catcards li a {
+.cards li a {
 	display: inline-block;
 	width:  calc(100% - 1.3rem );
 	height: calc(100% - 1.3rem );
 	padding: 0.5rem;
 	transition: all 0.2s;
 	/* padding: 1rem; */
-	/*width:  var(--catcard-size);
-	height: var(--catcard-size);*/
+	/*width:  var(--card-size);
+	height: var(--card-size);*/
 	color: var(--category-contrast-color);
 	background-color: var(--category-color);
 	/* text-align: center; */
 	border: 0.2rem solid var(--category-color);
 }
-.catcards li a:hover {
+.cards li a:hover {
 	background-color: var(--category-contrast-color);
 	color: var(--category-color);
 }