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

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

:root {
	--crl-accent-green-500: hsl(158, 36%, 37%);
	--crl-accent-green-700: hsl(158, 42%, 18%);

	--crl-neutral-black: hsl(212, 21%, 14%);
	--crl-neutral-grey: hsl(228, 12%, 48%);
	--crl-neutral-cream: hsl(30, 38%, 92%);
	--crl-neutral-white: hsl(0, 0%, 100%);
}

body {
	font-family: "Montserrat", serif;
   font-weight: 500;
	color: var(--crl-neutral-grey);

	height: 100vh;
   margin: 0;
	padding: 1rem;
   background: var(--crl-neutral-cream);

   display: flex;
   justify-content: center;
   align-items: center;
}

h1{
	font-family: "Fraunces", serif;
	font-weight: 700;
   font-size: 2rem;
   color: var(--crl-neutral-black);
   line-height: 1em;
}
p {
	font-size: 0.875rem;
   line-height: 1.75em;
}


.product-card {
	width: 100%;
	max-width: 575px;
	display: flex;
	overflow: hidden;
	border-radius: 7.5px;
	background-color: var(--crl-neutral-white);
}
.card-content {
	display: flex;
   flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	order: 1;
}

.tag {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.3rem;
	order: -1;
}

.price {
	display: flex;
	align-items: center;
}
.price > * {
	margin-bottom: 0;
}

.disc-price {
	font-family: "Fraunces", serif;
   font-weight: 700;
   font-size: 2rem;
   color: var(--crl-accent-green-500);
   margin-right: 1.3rem;
}
.orig-price {
	font-size: 0.8rem;
	text-decoration: line-through;
}


.add-to-cart-btn {
	font-family: inherit;
   font-size: 0.875rem;
   font-weight: 700;
	width: 100%;
	padding: 1rem 0;
	color: var(--crl-neutral-white);
	background-color: var(--crl-accent-green-500);
	border-radius: 7.5px; 
	border: none;
	cursor: pointer;
}
.add-to-cart-btn:hover,
.add-to-cart-btn:focus {
	background-color: var(--crl-accent-green-700);
}
.btn-icon {
	width: 0.875rem;
	height: 0.875rem;
	display: inline;
	margin-right: 0.5em;
	margin-bottom: -2px;
}

img {
	order: -1;
	margin-inline: auto;
}

.mobile-display {
	display: none;
}

.desktop-display {
	display: initial;
	width: 50%;
}


@media (max-width: 560px){
	
	.product-card { 
		max-width: 21.25rem;
		flex-direction: column;
		overflow: hidden;
	}
	.card-content {
		padding: 1.5rem;
		gap: 0.5rem;
	}
	.mobile-display {
		display: initial;
	}
	
	.desktop-display {
		display: none;
	}
}