diff --git a/src/components/Card.astro b/src/components/Card.astro
index 18ccba7..1893b8e 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -9,7 +9,7 @@ export interface Props {
 const { href, target, title, span} = Astro.props;
 ---
 
-<li class="link-card" style={span ? "grid-column: 1/-1" : ""}>
+<li class:list={["link-card",{ span }]} >
 	<a href={href} target={target}>
 		<h2>
 			{title}
@@ -33,6 +33,9 @@ const { href, target, title, span} = Astro.props;
 		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
 	}
+	.link-card.span {
+		grid-column: 1/-1;
+	}
 
 	.link-card > a {
 		width: 100%;