@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{
  margin: 0; 
  padding: 0; 
  box-sizing:border-box; 
  font-family:Montserrat;
}
body{
  background: hsl(30, 38%, 92%) ;
  display:flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh;
}
.container{
  width: 90vw;
  max-width:700px;
  background: white; 
  border-radius: .5rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr; 
  justify-content: space-between;
}
img{
  width:100%; 
}
.content{
  display: flex; 
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem;
  
}
.category{
  text-transform: uppercase; 
  color: hsl(228, 12%, 48%) ; 
  font-size: .7rem;
  font-weight: 500; 
  letter-spacing:.4rem;
}
.title{
  font-family: Fraunces; 
  font-weight: 700; 
  color: hsl(212, 21%, 14%) ; 
  line-height: 1.9rem;
}
.description{
  color:  hsl(228, 12%, 48%) ; 
  font-size:.85rem;  
  font-weight: 500; 
  line-height: 1.2rem;
}
.price{
display: flex; 
flex-direction: row; 
gap:1rem;
align-items:center;
} 
.big-price{
  font-family: fraunces; 
  font-weight: 700;  
  color: hsl(158, 36%, 37%) ;
}
.small-price{
  font-size: .8rem; 
  color: hsl(228, 12%, 48%) ; 
  text-decoration: line-through;
}
.cta{
  display: flex; 
  flex-direction: row; 
  gap:.5rem;
  border:none; 
  justify-content: center; 
  align-items: center; 
  background:  hsl(158, 36%, 37%)  ; 
  padding:1rem;  
  border-radius:.5rem ;
  cursor: pointer;
}
.cart-image{
  width:1rem;
}
.cta-title{
  color:white; 
  font-weight: 700;
}
button{
  transition:background-color .3s ease;
}
button:hover{
  background: hsl(158, 36%, 20%) ;
}
@media (min-width:400px) and (max-width:500px){
  html{
    font-size:19px;
  }
  .content{
    padding:1.3rem;
  }
}
@media (min-width:500px) and (max-width:600px){
  html{
    font-size:22px;
  }
  .content{
    padding: 1.5rem;
  }
}
@media (min-width:600px) and (max-width:700px){
  html{
    font-size:24px;
  }
  .content{
    padding:1.7rem;
  }
}
@media (min-width:700px) and (max-width:767px){
  html{
    font-size:26px;
  }
  .content{
    padding:1.9rem;
  }
}


@media (min-width:768px){
  .container{
    grid-template-columns: 1fr 1fr;
  }
  
  .big-img{
    display:inherit;
  }
  .content{
    padding:2.5rem ;
    gap:2rem;
  }
  html{
    font-size:17px;
  }
  .title{
    font-size:2.5rem;
  }
  .big-price{
    font-size:2.5rem;
  }
  
}