@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;1,500&family=Outfit:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Montserrat:ital,wght@0,700;1,500&family=Outfit:wght@400;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
main {
    background-color: hsl(30, 38%, 92%);  
    height: 98vh;
    font-family: Montserrat;
    display: flex;
    justify-content: center;
    align-items: center;
} 
.box {
    width: 48%;
    min-height: 33rem;
    display: flex;
    border-radius: 1rem;
    overflow: hidden;
}

.image {
    width: 50%;
}

.desktop {
    width: 100%;
    height: 100%;
    border-radius: 1rem 0 0 1rem;
}

.mobile {
    display: none;
}

.text{
    width: 50%;
    padding: 1.7rem;
    background-color: white;
    font-size: 1.3rem;
}
.first{
    color: hsl(228, 12%, 48%); 
    letter-spacing: 0.5rem;
}
h1{
    color: hsl(212, 21%, 14%);
    font-family: Fraunces;
    margin-top: 1rem;
}
.sec{
    margin-top: 1rem;
}

.price {
    display: flex;
    align-items: center;
}
.first-price{
    margin:1rem 2rem 1rem 0;
    font-size: 2rem;
    color:  hsl(158, 36%, 37%);
    font-family:Fraunces ;
}
.price:last-of-type{
    font-size: small;
    color: hsl(228, 12%, 48%);
    

}
button{
   background-color: hsl(158, 36%, 37%);
   color: white;
   width: 100%;
   padding: 1rem;
   border-radius: 1rem;
   font-family:Fraunces ;
   border: none;
}

 @media screen and (max-width:1030px){ 
    .box {
        flex-direction: column;
        width: 80%;
    }

    .image {
        width: 100%;
    }
    .text{
        width: 100%;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
        width: 100%;
       
    }
    
}