Update website structure and styles

components/Card/index.tsx

@@ -17,7 +17,7 @@ const Card: FC<Props> = ({ title, description, image, tags, href, target, onClic
 	return (
 		<Link href={href} passHref>
 			<StyledCard as='a' target={target} onClick={onClick} image={!!image}>
-				<div>
+				<div className='card-content'>
 					<h3>{title}</h3>
 					<p>{description}</p>
 					{tags && (
@@ -28,10 +28,10 @@ const Card: FC<Props> = ({ title, description, image, tags, href, target, onClic
 						</div>
 					)}
 				</div>
-				{image ? (
-					<Image src={image} width='100%' height='100%' layout='responsive' />
-				) : (
-					<Image src='/no-image.png' width='100%' height='100%' layout='responsive' />
+				{image && (
+					<div className='card-image'>
+						<Image src={image} layout='fill' objectFit='cover' />
+					</div>
 				)}
 			</StyledCard>
 		</Link>

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 {