@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Young+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat+Underline:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Young+Serif&display=swap');

/*reset*/
* {
    margin: 0;
    padding: 0;
    border: 0;

}

body {
    /*font-family: "Figtree", "sans-serif";*/
    background-color: hsl(30, 38%, 92%);
    display: flex;
    align-items: center;
    min-height: 100svh;
    justify-content: center;
    padding:1rem;
}

.card {
    background-color: hsl(0, 0%, 100%);
    border-radius: 10px;
    max-width: 20rem;
    display: flex;
    flex-direction: column;
    gap:0.6rem;
}


.card img {
    display: block;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

.card_details {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap:0.6rem;
    
}

.product_category {
    color:hsl(228, 12%, 48%);
    font-family: "Montserrat", serif;
    font-weight: 450;
    letter-spacing: 0.4rem;
    font-size: 0.8rem;
}

.product_title {
    font-family: "Fraunces", serif;
    font-weight: 700;
}

.product_desription {
    font-family: "Montserrat", serif;
    color:hsl(228, 12%, 48%);
    font-weight: 400;
}

.price_section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.price_section .new_price {
    
    color:hsl(158, 36%, 37%);
    font-family: "Fraunces", serif;
    font-size: 2rem;
}

.price_section .old_price {
    font-size: 700;
    font-family: "Montserrat", serif;
    color:hsl(228, 12%, 48%);
    text-decoration: line-through;
}

.add_to_cart {
    background-color:hsl(158, 36%, 37%);
    color:hsl(0, 0%, 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-radius: 10px;
}


@media (min-width:50rem){
    .card {
        background-color: hsl(0, 0%, 100%);
        border-radius: 10px;
        max-width: 38rem;
        max-height: 28rem;
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two equal-width columns */
        width: 100%;
    }

    .card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-top-left-radius:10px;
        border-bottom-left-radius: 10px;
        border-top-right-radius:0px;
    }

    .add_to_cart:hover{
        background-color: #005C5B;
        cursor: pointer;
    }

}