/* Fonts Import */
@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');

/* Variables */
:root{
    /* Colors */
    --black: #1C232B;
    --grey: #6C7289;
    --cream: #F2EAE2;
    --white: #FFF;
    --green-500: #3D8168;
    --green-700: #1A4032;
    
    /* Spacing */
    --spacing-500: 2.5rem;
    --spacing-400: 2rem;
    --spacing-300: 1.5rem;
    --spacing-200: 1rem;
    --spacing-100: .5rem;
    --spacing-50: .25rem;
}

/* Text Presets */
.text-preset-1{
    font-family: "Fraunces", serif;
    font-weight: bold;
    font-size: 2rem;
    line-height: 100%;
    letter-spacing: 0;
}

.text-preset-2{
    font-family: "Montserrat", serif;
    font-weight: bold;
    font-size: .875rem;
    line-height: 110%;
    letter-spacing: 0;
}

.text-preset-3{
    font-family: "Montserrat", serif;
    font-weight: 500;
    font-size: .875rem;
    line-height: 160%;
    letter-spacing: 0;
}

.text-preset-4{
    font-family: "Montserrat", serif;
    font-weight: 500;
    font-size: .75rem;
    line-height: 120%;
    letter-spacing: .3125rem;
}

.text-preset-5{
    font-family: "Montserrat", serif;
    font-weight: 500;
    font-size: .8125rem;
    line-height: 120%;
    letter-spacing: .0;
}

/* CSS Reset */
*{
    box-sizing: border-box
}

html, body{
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
}

/* General Styles */
body{
    min-height: 100dvh;
    /* height: 100vh; */
    width: 100vw;
    background-color: var(--cream);
    color: var(--black);
    padding: 5em .75em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    /* margin-top: 8em; */
    background-color: var(--white);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.product-image{
    width: 100%;
    border-radius: 8px 8px 0 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 11%;
}

/* Margin to 0, I'll use flexbox gap*/
.product-category, .product-name, .product-description, .price-box, .btn{
    margin: 0;
}
.product-info{
    padding: var(--spacing-400);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
}

.product-category{
    text-transform: uppercase;
    color: var(--grey);
}

.product-description{
    color: gray;
}

.price-box{
    display: flex;
    justify-content: left;
    align-items: center;
    gap: var(--spacing-200);
}

.product-price{
    color: var(--green-500);
}

.product-old-price{
    color: var(--grey);
    text-decoration: line-through;
}

.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-50);
    padding: 1.0938em 4em;
    background-color: var(--green-500);
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    text-align: center;
}

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

.btn:active{
    transform: scale(.95);
}

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

@media (min-width: 768px) {
    .container{
        /* margin-top: 0; */
        flex-direction: row;
        max-width: 600px;
        max-height: 28.125rem;
    }

    .product-image{
        width: 50%;
        border-radius: 8px 0 0 8px;
        aspect-ratio: initial;
    }
}