/**********************/
     /* IMPORTS */
/**********************/

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


/**********************/
   /* MAIN STYLES */
/**********************/

:root {

    /* VARIABLES */
    
    /* Colors */
    --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%);

    /* Spacing */
    --spacing-500: 40px;
    --spacing-400: 32px;
    --spacing-300: 24px;
    --spacing-200: 16px;
    --spacing-100: 8px;
    --spacing-50: 4px;

}

/* TYPOGRAPHY */

.fraunces-bold {
    font-family: "Fraunces", serif;
    font-optical-sizing: auto;
    font-size: 32px;
    font-weight: 700;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0px;
}

.montserrat-bold {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    line-height: 110%;
    letter-spacing: 0px;
}

.montserrat-medium {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    line-height: 160%;
    letter-spacing: 0px;
}

.montserrat-med-space {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 120%;
    letter-spacing: 5px;
}

.montserrat-med-strike {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    line-height: 120%;
    letter-spacing: 0px;
    text-decoration-line: line-through;
}

html {
    font-size: 14px;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    display: flex;
    padding: 80px 12px 0px 13px;
    flex-direction: column;
    align-items: center;
    background: var(--cream);
}

h1, p {
    margin: 0px;
}

.card-container {
    display: flex;
    width: 350px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.main-img {
    height: 342px;
    width: 100%;
    align-self: stretch;
    background: url(../images/image-product-desktop.jpg) lightgray -27.18px -52.686px / 122.286% 166.766% no-repeat;
    border-top-right-radius: var(--spacing-100);
    border-top-left-radius: var(--spacing-100);
}

.content-container {
    display: flex;
    padding: var(--spacing-400);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-300);
    align-self: stretch;
    background: var(--white);
    border-bottom-right-radius: var(--spacing-100);
    border-bottom-left-radius: var(--spacing-100);
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-300);
    align-self: stretch;
}

.title-subheading {
    color: var(--grey);
    text-transform: uppercase;
}

.title-heading {
    color: var(--black);
}

.title-copy {
    color: var(--grey);
}

.price-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-200);
}

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

.price-was {
    color: var(--grey);
}

.add-to-cart-btn {
    border: none;
    display: flex;
    padding: var(--spacing-200) var(--spacing-400);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-100);
    align-self: stretch;
    border-radius: var(--spacing-100);
    background-color: var(--green-500);
}

.shopping-cart-img {
    height: 18px;
    width: 18px;
    background: url(../images/icon-cart.svg) no-repeat;
}

.btn-copy {
    color: var(--white);
}

/**********************/
  /* MEDIA QUERIES */
/**********************/

/* Tablet 768px */
@media screen and (min-width: 768px) {

    body {
        width: 100vw;
        height: 100vh;
        display: inline-flex;
        padding: 0px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .card-container {
        width: 600px;
        flex-direction: row;
    }

    .main-img {
        height: 100%;
        width: 300px;
        background: url(../images/image-product-desktop.jpg) lightgray 0px 0px / 112.565% 100% no-repeat;
        border-top-right-radius: 0px;
        border-bottom-left-radius: var(--spacing-100);
    }

    .content-container {
        width: 300px;
        gap: var(--spacing-400);
        border-top-right-radius: var(--spacing-100);
        border-bottom-left-radius: 0px;
    }

}

/**********************/
/* HOVER STATE */
/**********************/

.add-to-cart-btn:hover {
    cursor: pointer;
    background-color: var(--green-700);
}