added margins for better looking dropshadows on CaseCards

Tiko · Tiko · commit 52825f958f25 · 2022-03-14T16:17:20.000+01:00
diff --git a/components/src/containers/CaseCard/CaseCard.tsx b/components/src/containers/CaseCard/CaseCard.tsx
@@ -8,7 +8,10 @@ const CaseCardContainer = styled.div`
 	border-radius: 10px;
 	height: 391px;
 	width: 272px;
-	filter: drop-shadow(2px 2px 24px rgba(0, 0, 0, 0.08));
+	filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.2));
+	overflow: visible;
+	margin-right: 30px;
+	margin-bottom: 30px;
 	padding: 60px 20px 0;
 	display: flex;
 	flex-direction: column;
diff --git a/website/pages/cases.tsx b/website/pages/cases.tsx
@@ -81,8 +81,7 @@ const casesOverviewContainerResponsiveCSS = () => {
 		"",
 		breakpointNameToPx({
 			xs: "1fr",
-			lg: "1fr 650px",
-			xl: "1fr 650px",
+			lg: "1fr 680px",
 		}));
 	const paddingTop = responsiveValuesCSS(
 		"padding-top",
@@ -101,7 +100,15 @@ const casesOverviewContainerResponsiveCSS = () => {
 			xl: 80
 		})
 	);
-	return gridColumns + paddingTop  + columnGap;
+	const justifyItems = responsiveValuesCSS(
+		"justify-items",
+		"",
+		breakpointNameToPx({
+			xs: "center",
+			lg: "flex-start"
+		})
+	);
+	return gridColumns + paddingTop + columnGap + justifyItems;
 };
 const CasesOverviewContainer = styled.div`
 	${casesOverviewContainerResponsiveCSS};
@@ -143,10 +150,9 @@ const CasesOverviewRightColumn = styled.div`
 	${casesOverviewRightColumnResponsiveCSS};
 	display: grid;
 	justify-items: center;
-	grid-column-gap: 20px;
-	grid-row-gap: 20px;
 	height: 800px;
 	overflow: scroll;
+	
 `;
 
 type Case = {
