Update website structure and styles

components/Card/styles.tsx

@@ -4,12 +4,20 @@ export const StyledCard = styled.div<{ image: boolean }>`
 	cursor: pointer;
 	width: 100%;
 	display: grid;
-	grid-template-columns: auto 150px;
+	grid-template-columns: ${({ image }) => (image ? 'auto 9.375rem' : 'auto')};
 	align-items: stretch;
 	transition: color 0ms ease-in-out;
 	text-decoration: none;
 	color: var(--text);
 
+	@media (max-width: 320px) {
+		grid-template-columns: ${({ image }) => (image ? 'auto 7.813rem' : 'auto')};
+	}
+
+	@media (min-width: 1440px) {
+		grid-template-columns: ${({ image }) => (image ? 'auto 15.625rem' : 'auto')};
+	}
+
 	&:hover {
 		& > div {
 			background: ${({ theme }) => theme.colors.blue};
@@ -24,7 +32,7 @@ export const StyledCard = styled.div<{ image: boolean }>`
 		}
 	}
 
-	& > div {
+	.card-content {
 		padding: 1rem 0rem;
 		background: var(--secondary-background);
 		display: grid;
@@ -35,6 +43,11 @@ export const StyledCard = styled.div<{ image: boolean }>`
 		}
 	}
 
+	.card-image {
+		position: relative;
+		width: 100%;
+	}
+
 	h3,
 	p,
 	.tags-wrapper {