lay card foundation

src/components/Card.vue

@@ -1,7 +1,20 @@
 <template>
 	<!-- <g-image alt="" :src="require(`../assets/spis/${photo}`)" /> -->
 	<div class="card">
-		<h3>{{ name }}</h3>
+		<div class="cardInnerFlex">
+			<div class="cardInnerPhoto">
+				<!-- <img alt="" :src="require(`~/assets/cards/${photo}`)" /> -->
+			</div>
+			<div class="cardInnerInfo">
+				<div class="cardInnerInfoTitle">
+					<h3>{{ name }}</h3>
+					<p>{{ nickname }}</p>
+				</div>
+				<p style="text-align: justify">
+					{{ description }}
+				</p>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -10,10 +23,9 @@ export default {
 	name: 'Card',
 	props: {
 		name: String,
+		nickname: String,
 		photo: String,
-		desc: String,
-		link: String,
-		discord: String,
+		description: String,
 	},
 };
 </script>
@@ -23,10 +35,35 @@ export default {
 	display: inline-block;
 	border: 1px solid var(--gray);
 	border-radius: 4px;
-	padding: 1rem;
+	// padding: 1rem;
 	margin: 1rem 0.2rem;
-	width: 45%;
+	width: 49%;
 	transition-duration: var(--trandur);
+	.cardInnerFlex {
+		display: flex;
+		flex-direction: row;
+		.cardInnerPhoto {
+			width: 8rem;
+			height: 8rem;
+			background-color: black;
+			border-top-left-radius: 3px;
+			border-bottom-left-radius: 3px;
+		}
+		.cardInnerInfo {
+			padding: 1rem;
+			.cardInnerInfoTitle {
+				display: flex;
+				flex-direction: row;
+				align-items: baseline;
+				h3 {
+					margin-right: 1rem;
+				}
+				p {
+					color: var(--graytext);
+				}
+			}
+		}
+	}
 	&:hover,
 	&:focus {
 		border: 1px solid transparent;