@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&display=swap');

    /* Colors */
    :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%);
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body, main{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: var(--Cream);
        font-size: 14px;
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 90vw;
        height: auto;
        background-color: var(--White);
        border-radius: 10px;
    }
    .container-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .container-header_image {
        width: 100%;
        height: 240px;
        object-fit: cover;
        object-position: center 50%;
        border-radius: 10px 10px 0 0;
    }

    .container-main{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        padding: 25px;
    }

    .container-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .container-content_category {
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 0.82rem;
        color: var(--Grey);
        text-transform: uppercase;
        margin-bottom: 0.75rem;
        letter-spacing: 0.2rem;
    }

    .container-content_title {
        font-family: 'Fraunces', serif;
        font-weight: 700;
        font-size: 1.9rem;
        color: var(--Black);
        margin-bottom: 0.79rem;
        line-height: 1.12;
    }

    .container-content_description {
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 0.88rem;
        color: var(--Grey);
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }

    .container-price {
        width: 100%;
        flex-direction: row;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        column-gap: 1.2rem; 
        margin-bottom: 0.8rem;
    }

    .container-price_discounted {
        font-family: 'Fraunces', serif;
        font-weight: 700;
        font-size: 2rem;
        color: var(--Green-500);
    }

    .container-price_price {
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 0.8rem;
        color: var(--Grey);
        text-decoration: line-through;
        align-self: center;
    }
    .container-price_button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        column-gap: 0.7rem;
        width: 100%;
        height: 50px;
        background-color: var(--Green-500);
        color: var(--White);
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 0.88rem;
        border-radius: 0.5rem;
        border: none;
        cursor: pointer;
    }

    .container-price_button:hover {
        background-color: var(--Green-700);
    }

    .container-price_button{
        align-self: center;
    }

    /* Tablet */
    @media (min-width: 768px) {
        .container{
            flex-direction: row;
        }
        .container-header_image {
            width: 100%;
            height: 400px;
            border-radius: 10px 0 0 10px;
            margin: 0;
            padding: 0;
            align-self: flex-start;
        }
    }
    /* laptop */
    @media (min-width: 1024px) {
        .container{
            flex-direction: row;
            width: 50vw;
            height: 400px;
            margin: 1rem;
        }
        .container-header_image {
            width: 100%;
            border-radius: 10px 0 0 10px;
            align-self: flex-start;
        }
        .container-main{
            margin:0.5rem 0.5rem 0.5rem 0;
        }

        .container-content_category {
            font-size: 0.6rem;
            margin-bottom: 1rem;
        }

        .container-content_title {
            font-size: 1.78rem;
            margin-bottom: 1.5rem;
        }
        .container-content_description {
            font-size: 0.8rem;
            margin-bottom: 1.4rem;
        }
        .container-price {
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
            margin-bottom: 1.2rem;
        }

        .container-price_discounted {
            font-size: 1.8rem;
        }
        .container-price_price {
            font-size: 0.78rem;
        }

        .container-price_button {
            width: 100%;
            height: 2.6rem;
            font-size: 0.77rem;
            font-weight: 700;
        }
        .container-price_button img {
            width: 0.9rem;
            height: 0.9rem;
        }
    }
    /* Desktop */
    @media (min-width: 1440px) {
     .container{
            flex-direction: row;
            width: 40vw;
            height: 400px;
            margin: 1rem;
        }
        .container-header_image {
            width: 100%;
            border-radius: 10px 0 0 10px;
            align-self: flex-start;
        }
        .container-main{
            margin:0.5rem 0.5rem 0.5rem 0;
        }

        .container-content_category {
            font-size: 0.6rem;
            margin-bottom: 1rem;
        }

        .container-content_title {
            font-size: 1.78rem;
            margin-bottom: 1.5rem;
        }
        .container-content_description {
            font-size: 0.8rem;
            margin-bottom: 1.4rem;
        }
        .container-price {
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
            margin-bottom: 1.2rem;
        }

        .container-price_discounted {
            font-size: 1.8rem;
        }
        .container-price_price {
            font-size: 0.78rem;
        }

        .container-price_button {
            width: 100%;
            height: 2.6rem;
            font-size: 0.77rem;
            font-weight: 700;
        }
        .container-price_button img {
            width: 0.9rem;
            height: 0.9rem;
        }
    }



    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }


    footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        margin-top: 0;
    }