💄 [Refact] Card layout adjustment

ThesllaDev · Aug 6, 2024 · eaae516 · eaae516
1 parent c7b0a63
commit eaae516
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/components/CountriesCard.jsx b/src/components/CountriesCard.jsx
@@ -1,10 +1,7 @@
 import { Link } from "react-router-dom";
 import "../styles/CountriesCard.scss";
 
-function CountriesCard({
-  datas
-}) {
-
+function CountriesCard({ datas }) {
   return (
     <>
       <Link to={`/countrie/${datas.cca3}`}>

diff --git a/src/styles/CountriesCard.scss b/src/styles/CountriesCard.scss
@@ -6,20 +6,30 @@ a {
 }
 
 .card {
-  max-width: 250px;
-  border-radius: 5px;
+	border-radius: 5px;
   box-shadow: 0px 0px 10px var.$gray;
+	display: flex;
+	flex-direction: column;
+	gap: 64px;
+	height: 400px;
 	padding-bottom: 32px;
 	min-height: 100%;
+  width: 250px;
+
+	figure {
+		height: 50%;
+	}
 
   img {
     border-radius: 5px 5px 0 0;
+		height: 100%;
+		object-fit: cover;
     width: 100%;
   }
 
   ul {
-    list-style: none;
-    margin: 16px;
+		height: 50%;
+    margin: 0 16px;
 
     span {
       font-weight: bold;