@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    /** Primary */
    --Green-500: hsl(158, 36%, 37%);
    --Green-700: hsl(158, 42%, 18%);
    /** Neutral */
    --Black: hsl(212, 21%, 14%);
    --Grey: hsl(228, 12%, 48%);
    --Cream: hsl(30, 38%, 92%);
    --White: hsl(0, 0%, 100%);
    /* 
    - Family: [Montserrat]
    Weights: 500, 700

    - Family: [Fraunces]
    Weights: 700
    */
}
body {
    font-family: Montserrat, serif;
    background: var(--Cream);
}
.main {
    display: flex;
    justify-content: center;
    align-items: center;
}
.card {
    /* margin: 2em 1em; */
    margin: clamp(1em, 2vw, 2em) clamp(0.5em, 1vw, 1em);
    display: grid;
    background: var(--White);
    border-radius: 0.5em;
    max-width: 25em;

    .image-container {

        .image {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 0.5em 0.5em 0 0;
            vertical-align: top;
        }
    }
    .text-container {
        padding: 1.6em;
        display: grid;
        gap: 1rem;
        height: 100%;

        .category {
            font-size: 0.7em; /*14px*/
            font-weight: 500;
            letter-spacing: 0.2em;
            color: var(--Grey);
            text-transform: uppercase;
        }
        .name-product {
            font-family: Fraunces, sans-serif;
            font-size: 2em;
            line-height: 1;
        }
        .description {
            font-size: 0.875em; /*14px*/
            color: var(--Grey);
            line-height: 1.5;
        }
        .price {
            display: flex;
            gap: 1em;
            align-items: center;
            
            .sale-price {
                font-family: Fraunces, sans-serif;
                font-size: 2em;
                font-weight: 700;
                color: var(--Green-500);
            }
            .normal-price {
                text-decoration: line-through;
                color: var(--Grey);
                font-size: 0.8em;
            }
        }
        .btn {
            background: var(--Green-500);
            color: var(--White);
            padding: 1em;
            border: none;
            border-radius: 0.5em;
            font-family: montserrat, sans-serif;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5em;
            
            &:hover {
                background: var(--Green-700);
                cursor: pointer;
            }
        }
    }
}

@media screen and (min-width: 64em){
    .main {
        height: 100vh;
    }
    .card {
        grid-template-columns: 1fr 1fr; 
        max-width: 35em;
        align-items: center;
        
        .image-container img.image {
            height: 100%;
            border-radius: 0.5em 0 0 0.5em;
            aspect-ratio: auto;
        }
    }
}