@use "../reset";
@use "../variable";
@use "../components/navbar";

/* Style each tag in an html */
/* describe to chatgpt what you want, good at css, or css reference */

/* font: sans-serif for headers, serif for paragraphs, mono for whatever */

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

.parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}

.div1 {
	grid-area: 1 / 1 / 2 / 3;
	body {
		margin: 0;
		font-family: variable.$font-body;
		background-color: variable.$oxford;
	}

	.container {
		padding: 20px;
	}

	.intro {
		text-align: left;
		margin-bottom: 50px;

		h1 {
			font-size: 2rem;
			margin-bottom: 10px;
			color: variable.$pink;
			font-family: variable.$font-header;
		}

		p {
			font-size: 1.1rem;
			margin-bottom: 20px;
			color: variable.$white;
			font-family: variable.$font-body;
		}

		.read-more {
			background-color: variable.$pink;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-size: 1rem;

			&:hover {
				background-color: variable.$violet;
			}
		}
	}
}
.div2 {
	grid-area: 1 / 3 / 2 / 4;
	.intro {
		h5 {
			font-size: 2rem;
			margin-bottom: 10px;
			color: variable.$white;
			font-family: variable.$font-header;
		}

		p {
			font-size: 1.1rem;
			margin-bottom: 20px;
			color: variable.$oxford;
			font-family: variable.$font-body;
		}
	}

	.parent {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 20px;
	}

	.div1 {
		grid-area: 1 / 1 / 2 / 2;
	}
	.div2 {
		grid-area: 1 / 2 / 2 / 3;
	}
	.div3 {
		grid-area: 1 / 3 / 2 / 4;
	}
	.div4 {
		grid-area: 2 / 1 / 3 / 2;
	}
	.div5 {
		grid-area: 2 / 2 / 3 / 3;
	}
	.div6 {
		grid-area: 2 / 3 / 3 / 4;
	}

	.feature {
		background-color: variable.$pink;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		text-align: center;

		h3 {
			font-size: 1.5rem;
			margin-bottom: 10px;
			color: variable.$green;
		}

		p {
			font-size: 1rem;
			margin-bottom: 20px;
			color: variable.$white;
		}

		.more {
			background-color: variable.$pink;
			color: #fff;
			padding: 10px 15px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-size: 0.9rem;

			&:hover {
				background-color: variable.$violet;
			}
		}
	}
}
