From eaae51656718016c1678a81686c67f8a8000bd30 Mon Sep 17 00:00:00 2001
From: ThesllaDev <theslladev@gmail.com>
Date: Tue, 6 Aug 2024 18:12:30 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20[Refact]=20Card=20layout=20adjus?=
 =?UTF-8?q?tment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CountriesCard.jsx |  5 +----
 src/styles/CountriesCard.scss    | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/CountriesCard.jsx b/src/components/CountriesCard.jsx
index 8a88ae2..f8760e2 100644
--- 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
index 3c1284d..3dfcded 100644
--- 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;