*{
    --Green_500: hsl(158, 36%, 37%);
    --Green_700: hsl(158, 42%, 18%);
    --Black: hsl(212, 21%, 14%);
    --Grey: hsl(228, 12%, 48%);
    --Cream: hsl(30, 38%, 92%);
    --White: hsl(0, 0%, 100%);
    margin: 0;
    padding: 0;
    font-size: 14px;
    box-sizing:border-box;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: var(--Cream);
    align-items: center;
    justify-content: center;
    /* background-image: url(./design/active-states.jpg);
    background-position: center;
    background-position: 14em; */
    /* font-family: "Montserrat", sans-serif; */
    /* font-family: "Fraunces", serif; */
    main{
        width: 43em;
        height: 32.1em;
        display: flex;
        background-color: var(--White);
        border-radius: 0.9em;
        overflow:hidden;
        .caja-img{
            width: 50%;
            height: 100%;
            .img{
                width: 100%;
                height: 100%;
            }
        }
        .caja-info{
            padding: 2.2em 2.26em;
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .tipo{
                text-transform: uppercase;
                font-family: "Montserrat", sans-serif;
                word-spacing: 10px;
                font-weight: 500;
                letter-spacing: 0.2em;
                color: var(--Grey);
            }
            div{
                display: flex;
                flex-direction: column;
                h2{
                    padding-top: 0.61em;
                    font-size: 2.29em;
                    font-family: "Fraunces", serif;
                    font-weight: 700;
                    line-height: 1em;
                    color: var(--Black);
                }
                .descripcion{
                    padding:1.8em 0;
                    font-size: 0.97em;
                    line-height: 1.68em;
                    color: var(--Grey);
                    font-family: "Montserrat", sans-serif;
                    font-weight: 700;
                }
                .precio{
                    font-size: 2.3em;
                    color: var(--Green_500);
                    font-weight: 700;
                    font-family: "Fraunces", serif;
                    .espan{
                        position: relative;
                        bottom: 0.69em;
                        padding-left:1.02em ;
                        font-size: 0.37em;
                        color: var(--Grey);
                        text-decoration: line-through;
                    }
                }
            }
            button{
                margin-top: 1.8em;
                padding: 1.2em;
                border-radius: 0.6em;
                color: var(--White);
                font-size: 1em;
                font-weight: 700;
                font-family: "Montserrat", sans-serif;
                display: flex;
                gap: 0.9em;
                justify-content: center;
                border: none;
                background-color:var(--Green_500);
                cursor: pointer;
                transition: all 300ms ease;
            }
            button:hover{
                background-color: var(--Green_700);
            }
        }
    }
}
@media (max-width:375px){
    body{
        padding: 0 1em ;
        main{
            width: 100%;
            height: auto;
            flex-direction: column;
            .caja-img{
                width: 100%;
                height: 30em;
                img{
                    background-size:contain;
                }
            }
            .caja-info{
                width: 100vw;
            }
        }
    }
}