HTML-CSS

Hello there👋! Congratulations on completing this challenge!

There are two errors in the code:

1.There is an extra semicolon at the end of the second @import statement, which causes the following CSS rules to not work properly.

2.In the second media query, the selector ".body" should be changed to "body" to properly target the body element.

Here is the corrected code:

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&display=swap');

/*font-family: 'Montserrat', sans-serif;
font-family: 'Fraunces', serif; */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Montserrat', sans-serif;
    background-color: hsl(30, 38%, 92%);
    font-size: 14px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    margin: 30px auto;
    padding: 0 30px;
    border-radius: 10px;
}

.grid{
    max-width: 800px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: hsl(0, 0%, 100%);
    border-radius: 15px;
    overflow: hidden;
}

.img img{
    max-width: 100%;
    display: inherit;
}

.card-content{
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

h6.pro-cat{
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 12px;
    line-height: 15px;
    color: hsl(228, 12%, 48%);
    font-weight: 500;
}

h2.pro-name{
    font-family: 'Fraunces', serif;
    line-height: 1em;
    font-size: 34px;
    font-weight: 700;
    color: hsl(212, 21%, 14%);
}

p.pro-description{
    color: hsl(228, 12%, 48%);
    line-height: 1.6em;
}

.price{
    display: flex;
    align-items: center;
}

p.current-price{
    font-family: 'Fraunces', serif;
    color:hsl(158, 36%, 37%);
    font-size: 25px;
    padding-right: 25px;
}

p.old-price{
    color: hsl(228, 12%, 48%);
    text-decoration: line-through;
}

button.cta{
    background-color: hsl(158, 36%, 37%);
    border: none;
    padding: 14px 0;
    border-radius: 14px;
    color: white;
    font-family: 14px;
    font-weight: 700;\n    cursor: pointer;
    transition: background-color .3s ease;\n    width: 100%;
}

button.cta img{
    padding-right: 7px;
}

button.cta:hover{
    background-color: hsl(158, 36%, 23%);
}

@media only screen and (max-width: 800px){
    .grid{
        grid-template-columns: 1fr;
    }
    .img img{
        max-height: 450px;
        width: 100%;
        object-fit: cover;
    }
    .card-content{
        display: block;
    }\n\n    h6.pro-cat, h2.pro-name, p.pro-description, .price{
        padding-bottom: 23px;
    }
}

@media only screen and (max-width: 375px){
    body{        
        max-width: 375px;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container{
        margin: 0;
        padding-left: 4px;
        padding-right: -40px;
        border-radius: 10px;
        display: inherit;
    }

    .img img{
        max-height: 250px;
    }

    .card-content{
        padding: 24px;
    }

    h6.pro-cat, h2.pro-name, p.pro-description, .price{
        padding-bottom: 0;   
    }   
    h2.pro-name{
        font-size: 31px;
        font-weight: 700;
        margin-top: -15px;
    }

    h6.pro-cat{
        font-size: 12px;
        margin-top: -3px;
    }

    p.pro-description{
        font-size: 13px;
        font-weight: 500;
        line-height: 23px;
        margin-top: -5px;\n    }
    p.current-price{
        font-size: 32px;
        line-height: 32px;
    }

    button.cta{
        padding: 12x 0;
        font-size: 13px;
    }
}

Hope you will find it helpful