@font-face {
	font-family: "Figtree";
	src: url("Figtree-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900; /* Specify the weight range */
	font-style: normal;
}

@font-face {
	font-family: "Figtree";
	src: url("Figtree-Italic-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900; /* Specify the weight range */
	font-style: italic;
}

:root {
	--spacing-300: 24px;
	--spacing-150: 12px;
	--spacing-100: 8px;
	--spacing-50: 4px;
	--yellow: hsl(47, 88%, 63%);
	--gray-500: hsl(0, 0%, 42%);
	--gray-950: hsl(0, 0%, 7%);
	--white: #ffffff;
	--font-primary: "Figtree", sans-serif;
	--text-preset-1: 800 24px/150% var(--font-primary);
	--text-preset-2: 500 16px/150% var(--font-primary);
	--text-preset-3: 500 14px/150% var(--font-primary);
	--text-preset-3-bold: 800 14px/150% var(--font-primary);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: var(--yellow);
	font-family: var(--font-primary);
	font-style: normal;
	letter-spacing: 0px;
	min-width: 375px;
}

main {
	display: flex;
	flex-direction: column;
	background-color: var(--white);
	padding: var(--spacing-300);
	width: 384px;
	height: fit-content;
	border-radius: 20px;
	gap: var(--spacing-300);
	box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
	border: 1px solid var(--gray-950);
	margin: auto var(--spacing-300);
}

.blog-img {
	width: 100%;
	height: 200px;
	border-radius: 10px;
	object-fit: cover;
}

.blog-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-150);
}

.blog-category {
	width: fit-content;
	height: fit-content;
	background-color: var(--yellow);
	padding: var(--spacing-50) var(--spacing-150);
	border-radius: var(--spacing-50);
}

.blog-category-text {
	font: var(--text-preset-3-bold);
	color: var(--gray-950);
}

.blog-publish-date-text {
	font: var(--text-preset-3);
	color: var(--gray-950);
}

.blog-heading-text {
	font: var(--text-preset-1);
	color: var(--gray-950);
}

.blog-heading-text:hover {
	color: var(--yellow);
	cursor: pointer;
}

.blog-description-text {
	font: var(--text-preset-2);
	color: var(--gray-500);
}

.blog-author {
	width: fit-content;
	display: flex;
	align-items: center;
	gap: var(--spacing-150);
}

.blog-author-img {
	width: 32px;
	height: 32px;
}

.blog-author-name {
	font: var(--text-preset-3-bold);
	color: var(--gray-950);
}

@media (max-width: 767px) {
	.blog-category-text {
		font-size: 12px;
	}
	.blog-description-text {
		font-size: 14px;
	}
	.blog-publish-date-text {
		font-size: 12px;
	}
	.blog-heading-text {
		font-size: 20px;
	}
}