@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100;0,9..144,400;0,9..144,700;1,9..144,900&display=swap');
body{
    background-color: hsl(30, 38%, 92%);
    display: flex;
    height: 90vh;
    justify-content: center;
    align-items: center;
}
.container{
    background-color: white;
    width: 50%;
    height: 50%;
    border-radius: 2%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}
.img-container{
    border-radius: 2% 0% 0% 2%;
    background-color: rgb(189, 74, 74);
    width: 50%;
    height: 100%;
    background-image: url(images/image-product-desktop.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.text-container{
    border-radius: 0% 2% 2% 0%;
    width: 50%;
    height: 100%;
    position: relative;
    padding: 20px;
    font-family: 'Montserrat', sans-serif;


}
.title{
    /* position: absolute; */
    padding: 10px;
    right: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 2px;
}
.hero{
    font-family: 'Fraunces';
    font-weight: 700;
    font-size: 24px;
    padding-left: 10px;
}
p{
    margin-top: 3px;
    padding-left: 10px;
    letter-spacing: 1.5px;
    font-size: 15px;
}
.price{
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding-left: 10px;
    color: hsl(158, 36%, 37%);

}
.stroke{
    position: absolute;
    left: 130px;
    bottom: 75px;
    font-size: 10px;
    text-decoration: line-through;
}
button{
    background-color:hsl(158, 36%, 37%) ;
    position: absolute;
    left: 30px;
    bottom: 50px;
    border: none;
    width: 70%;
    height: 30px;
    border-radius: 12px;
    color: white;
}
button:hover{
    background-color: hsl(158, 50%, 24%);
}
@media only screen and (max-width: 760px) {

  p{
    margin-top: 1px;
    padding-left: 7px;
    letter-spacing: 1px;
    font-size: 13px;
  }
}
@media only screen and (max-width: 830px) {

  p{
    margin-top: 1px;
    padding-left: 7px;
    letter-spacing: 1px;
    font-size: 12px;
  }
}

@media only screen and (max-width: 703px) {

  p{
    margin-top: 1px;
    padding-left: 7px;
    letter-spacing: 1px;
    font-size: 13px;
  }
  .img-container{

    border-radius: 2% 0% 0% 2%;
    background-color: rgb(189, 74, 74);
    width: 100%;
    height: 50%;
    background-image: url(images/image-product-desktop.jpg);
    /* background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
}
.text-container{

    border-radius: 0% 2% 2% 0%;
    width: 85%;
    height: 50%;
    position: relative;
    padding: 20px;
    font-family: 'Montserrat', sans-serif;


}
.container{
    background-color: white;
    width: 80%;
    height: 90%;
    border-radius: 2%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}
 button{
    background-color:hsl(158, 36%, 37%) ;
    position: absolute;
    left: 30px;
    bottom: 30px;
    border: none;
    width: 70%;
    height: 30px;
   
}
}
@media only screen and (max-width: 531px) {

 button{
    background-color:hsl(158, 36%, 37%) ;
    position: absolute;
    left: 30px;
    bottom: 30px;
    border: none;
    width: 70%;
    height: 30px;
    border-radius: 12px;
    color: white;
}
button:hover{
    background-color: hsl(158, 50%, 24%);
}
}