/* 
COLOR KEYS
*/

:root {
	--clr-cyan: hsl(158, 36%, 37%);
	--clr-cyan-btn: hsl(158, 41%, 21%);
	--clr-white: hsl(0, 0%, 100%);
	--clr-cream: hsl(30, 38%, 92%);
	--clr-blue-400: hsl(228, 12%, 48%);
	--clr-blue-700: hsl(212, 21%, 14%);
}

/* 
CSS RESET
*/

/*
  1. Use a more-intuitive box-sizing model.
  2. Remove default margin
*/

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

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/*
  5. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

/*
  6. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
	font: inherit;
}

/*
  7. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* 
FONTS
*/

/* Montserrat - 500 */

@font-face {
	font-family: "Montserrat";
	src: url(./product-preview-card-component-main/assets/fonts/Montserrat-Medium.ttf)
		format("truetype");
	font-display: swap;
	font-weight: 500;
	font-style: normal;
}

/* Montserrat - 700 */

@font-face {
	font-family: "Montserrat";
	src: url(./product-preview-card-component-main/assets/fonts/Montserrat-Bold.ttf)
		format("truetype");
	font-display: swap;
	font-weight: 700;
	font-style: normal;
}

/* Fraunces - 700 */

@font-face {
	font-family: "Fraunces";
	src: url(./product-preview-card-component-main/assets/fonts/Fraunces_72pt-Bold.ttf)
		format("truetype");
	font-display: swap;
	font-weight: 700;
	font-style: normal;
}

/* GLOBAL */

body {
	font-family: "Montserrat";
	font-size: 1rem;
	font-weight: 500;
	color: var(--clr-blue-400);
	padding: 5em 0.9em;
	background-color: var(--clr-cream);
}

.flex {
	display: flex;
	flex-direction: column;
}

/* LAYOUT */

.productPreviewCard {
	max-width: 620px;
	margin: 0 auto;
	background-color: var(--clr-white);
	border-radius: 11px;
	overflow: hidden;
}

.productPreviewCard__copy {
	padding: 1.6em;
}

.productPreviewCard__copy__pricing {
	margin-bottom: 0.8em;
}

.productPreviewCard__copy__pricing--flex {
	flex-direction: row;
	align-items: center;
}

/* TYPOGRAPHY */

.productPreviewCard__copy__title,
.productPreviewCard__copy__pricing__promo {
	font-size: 2.2rem;
	font-family: "Fraunces";
}


.productPreviewCard__copy__category {
	order: -1;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: 0.9rem;
	margin-bottom: 0.44em;
}

.productPreviewCard__copy__title {
	color: var(--clr-blue-700);
	line-height: 1.1;
	margin-bottom: 0.5em;
}

.productPreviewCard__copy__text {
	margin-bottom: 1em;
}

.productPreviewCard__copy__pricing__promo {
	color: var(--clr-cyan);
	margin-right: 0.6em;
}

.productPreviewCard__copy__pricing__original {
	text-decoration: line-through;
}

/* ASSETS */

.productPreviewCard__copy__btn {
	background-color: var(--clr-cyan);
	display: block;
	color: var(--clr-white);
	text-decoration: none;
	text-align: center;
	padding: 0.8em;
	border-radius: 11px;
	position: relative;
	font-weight: 500;
}

.productPreviewCard__copy__btn:hover,
.productPreviewCard__copy__btn:focus {
	background-color: var(--clr-cyan-btn);
}

.productPreviewCard__copy__btn__icon {
	display: inline;
	position: relative;
	bottom: -2px;
	margin-right: 8px;
	width: 17px;
}

/* 
DESKTOP VIEW
 */

 @media(min-width: 700px){
  .productPreviewCard--flex {
    flex-direction: row;
  }

  .productPreviewCard__heroImg,
  .productPreviewCard__copy{
    width: 50%;
  }

  .productPreviewCard__copy__category {
    margin-bottom: 1.3em;
  }

  .productPreviewCard__copy__pricing {
	margin-bottom: 1.4em;
  }
 }