@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,700;1,9..144,700&family=Montserrat:wght@500;700&display=swap');

* {
    margin :0px;
}

body{
background-color:antiquewhite;
}


.product {
    margin: 2rem;
    padding-bottom: 1.5rem;
    display:flex;
    flex-direction:column;
    max-width:375px;
    padding-top: 30px;
    margin:auto;
}




.product__content {
    display:flex;
    flex-direction: column;
    background-color: hsl(0, 0%, 100%);
    border-radius: 0px 0px 10px 10px;
    gap: 1rem;
    padding:1.5rem;
    width:inherit;
    margin:auto;
    min-width: 300px;
}


/* .product__image {
border-top-right-radius: 10px;
border-radius: 10px 10px 0px 0px;
position:relative;
top:5px;
} */

picture {
    /* border: solid black 2px; */
    margin: 0px;
    padding: 0px;
}
picture img {
 max-width: 375px;;
 min-height: 300px;
 margin:0px;
 border-radius:10px 10px 0px 0px; 
 position: relative;
 top: 5px;
 margin-bottom: 0px;;
}


/*imported fonts*/

.product__category {
font-family: 'Montserrat', sans-serif;
font-size:12px;
font-weight:400;
color: hsl(228, 12%, 48%);
letter-spacing: 5px;
}

.product__title {
    font-family: 'Fraunces', 
}


.product__description {
    font-size: 14px;
    line-height: 1.5rem;
    font-family: 'Montserrat', sans-serif;
    color: hsl(228, 12%, 48%)
}



.flex-group {
display:flex;
flex-direction: row;
gap: 1.75rem;
}

.original-price{
    position:relative;
    top:13px;
    color:hsl(228, 12%, 48%)
}

.current-price {
    font-family: "Fraunces";
    font-size: 2.5rem;
    color:hsl(158, 36%, 37%);
}

.button {
    background-color:hsl(158, 36%, 37%);
    color:hsl(0, 0%, 100%);
    font-family:'Montserrat', sans-serif;
    border-radius: 5px;
    height: 3rem;
    transition-duration: 0.5s;
    cursor: pointer;
}

.botton.hover {
    background-color:hsl(158, 36%, 10%);
}

.svg-icon {
   position: relative;
   top: 3px;
   right: 7px;
}
.attribution{
    margin: 11px;
    justify-content: center;
}


@media (min-width: 1440px) { 


    .product {
    display:flex;
    flex-direction: row;
    height:100vh;
    align-items:center;
    justify-content: center;
    border-radius: 10px;

    }
    
    picture {
        margin: 0px;
        padding: 0px;
    }
    picture img {
     max-width: 375px;;
     min-height: 393px;
     max-height: 431px;
     margin:0px;
     border-radius:10px 0px 0px 10px; 
     position: relative;
     top: 2px;
    }

    .product__content {
        border-radius: 0px 10px 10px 0px;
        min-height: 383px;
    }
}