:root{
  --primaryFont: "Montserrat", sans-serif;
  --secondaryFont:"Fraunces", serif;

  --Green500: hsl(158, 36%, 37%);
  --Green700: hsl(158, 42%, 18%);
  --Black: hsl(212, 21%, 14%);
  --Grey: hsl(228, 12%, 48%);
  --Cream: hsl(30, 38%, 92%);
  --White: hsl(0, 0%, 100%);
}

*, *::after, *::before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
html,body{
  min-height:100vh;
}
body{
  background-color: var(--Cream);
  font-family: var(--primaryFont);
  display: flex;
  justify-content: center;
  align-items: center; 
  color: var(--Grey);
  font-size: 14px;
  font-weight: 400; 
}

img{
  max-width: 100%;
  height: auto;
}

.content{
  width:600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image_area{
  flex-basis: 50%;
  
}

img.desktop-image{
  display: block;  
  border-radius: 10px 0 0 10px;
}
img.mobile-image{
  display: none;
  border-radius: 10px 10px 0 0;
}
.text_area{
  flex-basis: 50%;
  background-color: var(--White); 
  border-radius: 0 10px 10px 0;
  padding:30px;
} 
.text_area h4{
  font-weight: normal;
  letter-spacing: 4px;
  font-size: 14px;
  margin-bottom: 20px;
  font-weight: 500;
}
.text_area h1{
  font-size: 32px;
  font-family: var(--secondaryFont);
  color: var(--Green700);
  margin-bottom: 20px;
}
.text_area p{
  font-size: 14px;
  line-height: 1.5em;
  margin-bottom: 20px;
}
.text_area p.price{
  font-family: var(--secondaryFont);
  font-size: 32px;
  font-weight: 700;
  color: var(--Green500);
  margin-bottom: 20px;
}
.text_area p.price span{
  font-family: var(--primaryFont);
  color: var(--Grey);
  font-size: 14px;
  font-weight: normal;
  text-decoration: line-through;  
  position: absolute;
  margin-left: 15px;
}

button{
  background-color: var(--Green500);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: var(--White);
  width:100%;
  padding:14px 10px;  
  cursor: pointer;  
  transition: .7s;
}
button:hover{
  background-color: var(--Green700);
}
button img{
  margin-bottom: -3px;
  margin-right: 7px;
  width:14px;
}
@media screen and (max-width:600px){
  .content{
  width:90%;
  display: flex;
  flex-direction: column;
  margin:5% auto;
}
.image_area{
  width:100%;  
}
.text_area{
  width: 100%;
  border-radius: 0 0 10px 10px;
  padding:25px;
} 
img.desktop-image{
  display: none;  
  border-radius: 10px 0 0 10px;
}
img.mobile-image{
  display: block;
  border-radius: 10px 10px 0 0;
}

.text_area h4{
  margin-bottom: 10px;
}
.text_area h1{
  font-size: 30px;
  margin-bottom: 10px;
}
.text_area p{
  line-height: 1.4em;
  margin-bottom: 10px;
}
.text_area p.price{
  font-size: 30px;
  margin-bottom: 10px;
}
}