/*- RESET */
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*- RESET */

:root {
	--white: hsl(0, 0%, 100%);
	--very-dark-blue: hsl(212, 21%, 14%);
	--dark-grayish-blue: hsl(228, 12%, 48%);

	--dark-cyan: hsl(158, 36%, 37%);
	--cream: hsl(30, 38%, 92%);
	--btn-hover: hsl(157, 42%, 18%);

	--font-size0: 14px;

	--font-basic: "Montserrat", sans-serif;
	--font-fancy: "Fraunces", serif;

	/*- Family: [Montserrat](https://fonts.google.com/specimen/Montserrat)
	- Weights: 500, 700

	- Family: [Fraunces](https://fonts.google.com/specimen/Fraunces)
	- Weights: 700
	*/

	--bold0: 500;
	--bold1: 700;
}

html {
	font-family: var(--font-basic);
	font-weight: var(--bold0);
	font-size: var(--font-size0);
	font-style: normal;
	color: var(--dark-grayish-blue);
	height: 100%;

}


body {
	background-color: var(--cream); 
	height: 100%;

}


main {
	display: flex;
	align-items: center;
	justify-content: center;

	height: 100%;

}

.card {
	max-width: 30rem;

	display: grid;

	margin-block: 2rem;
	margin-inline: 2rem;

}

.card img {
    vertical-align: bottom;
    border-radius: 10px 10px 0 0;
	width: 100%;

}

.card .content {
	background-color: var(--white);
	border-radius: 0 0 10px 10px;
	padding: 2rem;

}

.card .text {
	display: grid;
	gap: 1.5em;
}


.title,  span.price-tag {
	font-family: var(--font-fancy);
	font-weight: var(--bold1);
}

h1.title {
	font-size: 2.25rem;
	color: var(--very-dark-blue);
}

.description {
	line-height: 1.65;

}

p.category {
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 3px;

}

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

.price-tag {
	font-size: 2.25rem;
	color: var(--dark-cyan);

}

.price-tag-fake {
	text-decoration: line-through;
	font-size: 0.9rem;
	font-weight: var(--bold0);
	font-family: var(--font-basic);

}

.btn {
	background-color: var(--dark-cyan);
	border: 0;
	border-radius: 10px;
	padding: 1.2rem;
	color: var(--white);
	font-weight: var(--bold1);
}

.btn.cart::before {
	content: url("images/icon-cart.svg");
	padding-right: 0.75rem;
	vertical-align: middle;
}


.btn:hover {
	background-color: var(--btn-hover);
}

@media screen and (min-width: 42rem) {

	.card {
		grid-auto-flow: column;
		grid-template-columns: 1fr 1fr;
		max-width: 42rem;
	}

	.card  img {
		align-self: stretch;
		height: 100%;
		border-radius: 10px 0 0 10px;
	}

	.card .content {
		border-radius: 0 10px 10px 0;

	}

	.card .text {
		gap: 2em;
	}

}