@font-face {
	font-family: 'DM Sans';
	font-weight: 400 500;
	src: url('../assets/fonts/DMSans-VariableFont_opsz,wght.ttf');
}

@font-face {
	font-family: 'DM Sans';
	font-style: italic;
	font-weight: 400 500;
	src: url('../assets/fonts/DMSans-Italic-VariableFont_opsz,wght.ttf');
}

:root {
	--primary-subdued: hsl(254, 88%, 90%);
	--primary-base: hsl(256, 67%, 59%);
	--accent-subdued: hsl(31, 66%, 93%);
	--accent-base: hsl(39, 100%, 71%);
	--white: hsl(0, 0%, 100%);
	--off-white: hsl(0, 0%, 96%);
	--black: hsl(0, 0%, 7%);

	--fs-reg: 1.25rem;

	--fs-md: 2.25rem;
	--fs-lg: 3rem;
	--fs-xl: 4rem;
}

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	ul,
	ol,
	figure {
		margin: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: 500;
	}

	img {
		max-width: 100%;
		display: block;
	}
}

@layer base {
	html {
		font-family: 'DM Sans', sans-serif;
		line-height: 1.3;
	}

	body {
		margin: 32px;
		color: var(--black);
		font-size: var(--fs-reg);
		background: var(--off-white);
	}

	h1,
	h2 {
		color: var(--heading-foreground, inherit);
		font-size: var(--heading-font-size, var(--fs-md));
		line-height: 1.1;
		text-wrap: balance;

		span {
			display: var(--heading-span-display, inline);
			color: var(--heading-span-foreground, var(--black));
			font-size: var(--heading-span-font-size, inherit);
			font-style: var(--heading-span-style, normal);
		}
	}
}

@layer layout {
	.bento-grid {
		display: grid;
		gap: 24px;
		max-inline-size: 1200px;
		margin-inline: auto;
		grid-template-areas:
			'one'
			'two'
			'three'
			'four'
			'five'
			'six'
			'seven'
			'eight';

		@media (width > 660px) {
			grid-template-areas:
				'one one'
				'two three'
				'four six'
				'four seven'
				'five eight';
		}

		@media (width > 960px) {
			grid-template-areas:
				'seven one one four'
				'seven two three four'
				'eight two three four'
				'eight six five five';
		}
	}

	.bento-grid > * {
		color: var(--bento-card-foreground, var(--black));
		background-color: var(--bento-card-surface, var(--white));
		padding: var(--bento-card-padding, 32px);
		border-radius: var(--bento-card-border-radius, 21px);

		overflow: clip;

		display: grid;
		gap: var(--bento-card-gap, 32px);
		align-content: var(--bento-card-vertical-alignment, start);
		align-items: var(--bento-card-vertical-alignment, start);
		justify-items: var(--bento-card-horizontal-alignment, start);
		text-align: var(--bento-card-horizontal-alignment, start);
	}

	.bento-grid img {
		max-width: var(--bento-card-image-width, 100%);
		width: var(--bento-card-image-width, 100%);
		order: var(--bento-card-image-order);
	}

	.bento-grid > :nth-child(1) {
		--heading-font-size: var(--fs-xl);
		--heading-span-foreground: var(--accent-base);
		--bento-card-foreground: var(--white);
		--bento-card-surface: var(--primary-base);
		--bento-card-padding: 48px;
		--bento-card-horizontal-alignment: center;
		--bento-card-image-width: 70%;
		--bento-card-gap: 16px;

		@media (width > 960px) {
			--bento-card-image-width: 45%;
		}

		grid-area: one;
	}

	.bento-grid > :nth-child(2) {
		--bento-card-image-order: -1;

		grid-area: two;

		@media (width > 960px) {
			--bento-card-image-width: 150%;
		}

		/* fixing shadow issue in asset */
		> img {
			filter: drop-shadow(0 0 1rem hsl(0 0% 0% / 0.25));
			border-radius: 100vw;
		}
	}

	.bento-grid > :nth-child(3) {
		--bento-card-surface: var(--accent-base);

		grid-area: three;

		> img {
			--bento-card-image-width: 75%;

			margin-bottom: -55px;

			@media (width > 960px) {
				--bento-card-image-width: 100%;
				margin-bottom: -125px;
			}
		}
	}

	.bento-grid > :nth-child(4) {
		--bento-card-horizontal-alignment: center;
		--bento-card-surface: var(--primary-subdued);

		grid-area: four;

		@media (width > 960px) {
			--bento-card-image-width: 180%;
			--bento-card-horizontal-alignment: start;
			--bento-card-vertical-alignment: center;
		}
	}

	.bento-grid > :nth-child(5) {
		--bento-card-horizontal-alignment: center;
		--bento-card-foreground: var(--white);
		--bento-card-surface: var(--primary-base);
		--bento-card-image-width: 75%;
		--bento-card-image-order: -1;

		grid-area: five;

		@media (width > 960px) {
			--bento-card-gap: 16px;
			--bento-card-image-width: 100%;
			--bento-card-vertical-alignment: center;
			--bento-card-horizontal-alignment: start;
			grid-template-columns: 1fr 1fr;
		}
	}

	.bento-grid > :nth-child(6) {
		--heading-font-size: var(--fs-xl);
		--heading-span-display: block;
		--heading-span-font-size: var(--fs-reg);

		--bento-card-image-width: 60%;

		grid-area: six;

		@media (width > 960px) {
			--bento-card-image-width: 80%;
		}
	}

	.bento-grid > :nth-child(7) {
		--heading-span-foreground: var(--primary-base);
		--heading-span-style: italic;

		--bento-card-surface: var(--accent-subdued);
		--bento-card-image-width: 60%;

		grid-area: seven;

		@media (width > 960px) {
			--bento-card-image-width: 100%;
			--bento-card-vertical-alignment: center;
		}
	}

	.bento-grid > :nth-child(8) {
		--bento-card-surface: var(--accent-base);
		--bento-card-image-width: 60%;

		grid-area: eight;

		@media (width > 960px) {
			--bento-card-image-width: 105%;
			--bento-card-vertical-alignment: center;
		}
	}
}

@layer utilities {
	.visually-first {
		order: -1;
	}
}