:root {
    --color-white:hsl(0, 0%, 100%);
    --color-cream:hsl(30, 38%, 92%);
    --color-grey:hsl(228, 12%, 48%);
    --color-black:hsl(212, 21%, 14%);
    --color-green-500:hsl(158, 36%, 37%);
    --color-green-700:hsl(158, 42%, 18%);
}

body {
    background-color:var(--color-cream);
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family:"Montserrat",Arial, Helvetica, sans-serif;
    font-weight: 500;
    height:100%;
    font-size:clamp(0.8rem, 2vh,7rem);
}

.card {
    background-color:var(--color-white);
    border-radius:0.5rem;
    width:clamp(20rem,18rem + 20vw, 120rem);
    margin-top: clamp(2rem,1.6rem + 6vw,10rem);
}

.image {
    border-radius:0.5rem 0.5rem 0rem 0rem;
    width: 100%;
    object-fit:cover;
}

.card_text {
    margin:2rem;
}

.product_category {
    text-transform: uppercase;
    letter-spacing: 10px;
    color:var(--color-grey)
}

.product_name {
    font-family: "Fraunces",'Times New Roman', Times, serif;
    font-weight:700;
    font-size: clamp(1rem, 4vh,10rem);
    margin:0;
}

.product_description {
    color:var(--color-grey);
    line-height: 1.5rem;
}

.product_sale_price {
    color:var(--color-green-500);
    font-family:"Fraunces",'Times New Roman', Times, serif;
    font-weight:700;
    display:inline;
    font-size:clamp(2rem, 0.2rem + 5vh,10rem);
    vertical-align: middle;
}

.product_price {
    color:var(--color-grey);
    text-decoration: line-through;
    display:inline;
    margin-left: 1rem;
}

.add_to_cart {
    border-radius: 0.5rem;
    background-color: var(--color-green-500);
    color:var(--color-white);
    padding:20px;
    display:flex;
    justify-content: center;
    font-weight:700;
    text-decoration: none;
    gap:0.5rem;
    margin-top: 2rem;
}

.add_to_cart:hover {
    background-color: var(--color-green-700);
}

footer {
    position:relative;
    top: clamp(0.8rem,0.5rem + 8vw,8rem);;
}

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

@media (min-width:68em) {

    .card {
        display:inline-flex;
        width:clamp(20rem,18rem + 32vw, 120rem);
    }

    .image {
        border-radius: 0.5rem 0 0 0.5rem;
        height:clamp(25rem,35rem + 24vw, 38rem);
        width: clamp(18rem,10rem + 16vw, 60rem);
    }
}