/*CSS Reset*/
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--color-bg: hsl(0, 0%, 95%);
	--color-purple: hsl(256, 67%, 59%);
	--color-yellow: hsl(39, 100%, 71%);
	--color-light-purple: hsl(254, 88%, 90%);
	--color-light-yellow: hsl(31, 66%, 93%);
	--color-link: hsl(228, 45%, 44%);
	--color-white: #fff;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 48px;
	--spacing-xxl: 96px;
	--border-radius: 8px;
}

html {
	font-size: 18px;
	background-color: var(--color-bg);
	font-family: "DM Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

h1,
h2 {
	font-weight: 500;
}

h3 {
	font-weight: 600;
	font-size: 1.5rem;
}

img {
	object-fit: contain;
}

.container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	max-height: 100vh;
}

.content-container {
	display: flex;
	flex-direction: row-reverse;
	gap: var(--spacing-lg);
	padding: var(--spacing-xxl);
}

.grid-container {
	display: grid;
	grid-template-areas:
		"social-media social-media schedule"
		"multiple-platforms consistent-schedule schedule"
		"audience-growth grow-followers grow-followers";
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: var(--spacing-lg);
	width: 75vw;
	aspect-ratio: 1 / 1;
}

.flex-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	width: 25vw;
}

.card {
	border-radius: var(--border-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.purple-card {
	color: var(--color-white);
	padding: 5%;
	text-align: center;
	background-color: var(--color-purple);
	align-items: center;
}

.white-card {
	background-color: var(--color-white);
	padding: var(--spacing-md);
}

.yellow-card {
	background-color: var(--color-yellow);
	padding: var(--spacing-md);
}

.light-purple-card {
	padding: var(--spacing-md);
	text-align: left;
	background-color: var(--color-light-purple);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.light-yellow-card {
	background-color: var(--color-light-yellow);
	padding: var(--spacing-lg);
}

#social-media {
	grid-area: social-media;
}

#schedule {
	grid-area: schedule;
}

#multiple-platforms {
	grid-area: multiple-platforms;
}

#consistent-schedule {
	grid-area: consistent-schedule;
}

#grow-followers {
	display: flex;
	flex-direction: row;
	grid-area: grow-followers;
	gap: var(--spacing-md);
}

#audience-growth {
	gap: var(--spacing-md);
	grid-area: audience-growth;
}

#create-post {
	height: 50%;
	justify-content: center;
	gap: var(--spacing-md);
}

#ai-content {
	height: 50%;
	gap: var(--spacing-md);
}

#create-post > h3,
#ai-content > h3 {
	font-size: 2rem;
}

#img-five-star {
	margin-top: var(--spacing-md);
	width: 33%;
}

#img-multi-platform {
	width: 310px;
}

#img-consistent-schedule {
	margin-top: var(--spacing-md);
	width: 100%;
}

#img-schedule {
	width: 180%;
	max-height: 250px;
}

#img-grow-followers {
	width: 50%;
}

#img-audience-growth {
	width: 100%;
}

#img-create-post {
	width: 65%;
	align-self: center;
}

#img-ai-content {
	width: 100%;
}

.attribution {
	font-size: 11px;
	text-align: center;
}
.attribution a {
	color: var(--color-link);
}

@media (max-width: 600px) {
	.grid-container {
		width: 100%;
		grid-template-areas:
			"social-media"
			"multiple-platforms"
			"consistent-schedule"
			"schedule"
			"grow-followers"
			"audience-growth";
		grid-template-columns: 1fr;
		grid-template-rows: repeat(6, max-content);
	}

	.flex-container {
		width: 100%;
	}

	.content-container {
		flex-direction: column;
		padding: var(--spacing-md);
	}

	.purple-card {
		padding: var(--spacing-xl);
	}

	.light-purple-card {
		text-align: center;
	}

	#schedule {
		height: 100%;
	}

	#grow-followers {
		flex-direction: column;
	}

	#create-post > h3,
	#ai-content > h3 {
		font-size: 1.5rem;
	}

	#img-five-star {
		width: 100%;
	}

	#img-consistent-schedule {
		width: 60%;
	}

	#img-schedule {
		width: 100%;
		max-height: 100%;
	}

	#img-grow-followers {
		width: 100%;
	}

	#img-audience-growth {
		width: 50%;
	}

	#img-create-post {
		align-self: flex-start;
	}

	#img-ai-content {
		width: 65%;
	}
}