html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

/* *custom properties */
@font-face {
	font-family: "fraunces";
	src: url(../assets/fonts/Fraunces/Fraunces-VariableFont_SOFT\WONK\opsz\wght.ttf)
		format("ttf");
}

@font-face {
	font-family: "montserrat";
	src: url("../assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf")
		format("ttf");
}

:root {
	/* Primary Colors */
	--green-500: hsl(158, 36%, 37%);
	--green-700: hsl(158, 42%, 18%);

	/* Neutral Colors */
	--black: hsl(212, 21%, 14%);
	--grey: hsl(228, 12%, 48%);
	--cream: hsl(30, 38%, 92%);
	--white: hsl(0, 0%, 100%);

	/* Typography */
	--font-primary: "fraunces", serif;
	--font-secondary: "montserrat", sans-serif;

	/* border radius */
	--border-radius: 1rem;
}

/* *styling */
body {
	background-color: var(--cream);
	font-family: var(--font-secondary);
	margin-block: 0;
}

h1,
p {
	margin: 0;
	padding: 0;
}

p {
	font-size: 0.875rem;
	color: var(--grey);
	font-weight: 500;
}

.add-to-cart-button {
	color: var(--white);
	text-decoration: none;
	font-weight: 800;
	background-color: var(--green-500);
	text-align: center;
	padding: 1rem;
	border-radius: 0.5rem;
}

.add-to-cart-button::before {
	content: url(../images/icon-cart.svg);
	margin-inline-end: 0.5rem;
}

.add-to-cart-button:hover {
	background-color: var(--green-700);
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.product-about {
	line-height: 1.6;
}

.product-name {
	font-size: 2.1rem;
	line-height: 1;
}

.product-name,
.product-price {
	font-family: var(--font-primary);
}

.product-card {
	background-color: var(--white);
	max-width: 600px;
	border-radius: var(--border-radius);
}

.product-details {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.5rem, 5vw, 2rem);
}

.product-img img {
	width: 100%;
	height: auto;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.product-price {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.product-price-now {
	font-size: 2rem;
	color: var(--green-500);
	font-weight: 600;
}

.product-price-before {
	text-decoration: line-through;
	font-weight: 600;
}

.product-type {
	margin-block-start: 0;
	text-transform: uppercase;
	letter-spacing: 0.3rem;
}

@media (width > 400px) {
	.product-card {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.product-details {
		justify-content: space-between;
	}

	.product-img img {
		content: url("../images/image-product-desktop.jpg");
		border-radius: var(--border-radius) 0 0 var(--border-radius);
		object-fit: cover;
		height: 100%;
	}
}