/* 
--------------TYPOGRAPHY--------------
FONT SIZE
12px / 16px / 20px / 24px / 32px / 40px / 48px/ 60px    - (Scale factor - 1.25)

FONT WEIGHT
500 / 700

FONT FAMILY
Montserrat
Fruances

LINE HEIGHT
1.2 / 1.5

LETTER SPACING
0 / -2px


--------------COLORS--------------
PRIMARY
Green 500: hsl(158, 36%, 37%)
Green 700: hsl(158, 42%, 18%)

NEUTRAL
Black: hsl(212, 21%, 14%)
Grey: hsl(228, 12%, 48%)
Cream: hsl(30, 38%, 92%)
White: hsl(0, 0%, 100%)

--------------BORDER RADIUS--------------
4px / 8px / 20px


--------------SPACING SYSTEM-------------- (base unit is 10px)
5px / 10px / 15px / 20px / 25px / 30px / 40px / 50px / 60px/ 70px/ 80px / 90px / 100px / 125px / 150px / 200px / 250px / 300px / 400px / 500px

*/

/* --------------GLOBAL STYLES DECLARATION-------------- */

:root {
	/* FONT SIZE */
	--text-paragraph: 1.4rem;
	--text-h1: 3.2rem;

	/* FONT WEIGHT */
	--font-weight-normal: 500;
	--font-weight-bold: 700;

	/* FONT FAMILY */
	--font-family-1: "Montserrat", sans-serif;
	--font-family-2: "Fraunces", serif;

	/* LINE HEIGHTS */
	--line-height-tight: 1.05;
	--line-height-normal: 1.5;

	/* LETTER SPACING */
	--letter-spacing-tight: -2px;
	--letter-spacing-loose: 4px;

	/* COLOR */
	--primary-base: hsl(158, 36%, 37%);
	--primary-shade: hsl(158, 42%, 18%);
	--black: hsl(212, 21%, 14%);
	--grey: hsl(228, 12%, 48%);
	--cream: hsl(30, 38%, 92%);
	--white: hsl(0, 0%, 100%);
}

/* --------------GENERAL STYLES SETTINGS-------------- */

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

html {
	font-size: 62.5%; /*10px - 1rem*/
}

body {
	font-family: var(--font-family-1);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-normal);
	color: var(--grey);
	background-color: var(--cream);
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* --------------COMPONENT STYLE-------------- */
.container {
	max-width: 600px;
	width: 90%;
	display: flex;
	border-radius: 10px;
	overflow: hidden;
}

.left-side {
	width: 50%;
	background-image: url(../images/image-product-desktop.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.product-img {
	width: 100%;
}

.right-side {
	background-color: var(--white);
	width: 50%;
	padding: 3rem;
}

.product-title {
	letter-spacing: var(--letter-spacing-loose);
	text-transform: uppercase;
	margin-bottom: 2rem;
}

h1 {
	font-size: var(--text-h1);
	font-family: var(--font-family-2);
	color: var(--black);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
}

.product-paragraph {
	margin: 2.5rem 0;
	line-height: var(--line-height-normal);
	font-size: var(--text-paragraph);
}

.new-product-price {
	font-size: 2.8rem;
	color: var(--primary-base);
	font-family: var(--font-family-2);
	font-weight: var(--font-weight-bold);
	margin-bottom: 2.5rem;
}

.old-price {
	position: relative;
}

.old-price::after {
	content: "$169.99";
	text-decoration: line-through;
	color: var(--grey);
	font-size: var(--text-paragraph);
	position: absolute;
	top: 8px;
	right: 60px;
}

.btn {
	width: 100%;
	background-color: var(--primary-base);
	color: var(--white);
	padding: 1rem 0;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	border: 1px solid var(--primary-base);
	transition: 0.5s;
}

.btn img {
	width: 16px;
}

.btn p {
	font-size: var(--text-paragraph);
	font-weight: var(--font-weight-bold);
}

.btn:hover {
	cursor: pointer;
	background-color: var(--primary-shade);
	transform: scale(1.05, 1.05);
}