:root {

    /* Primary Colors */

    --green-color-500: hsl(158, 36%, 37%);
    --green-color-700: hsl(158, 42%, 18%);

    /* Neutral Colors */
    --black-color: hsl(212, 21%, 14%);
    --gray-color: hsl(228, 12%, 48%);
    --cream-color: hsl(30, 38%, 92%);
    --white-color: hsl(0, 0%, 100%);
}



* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    font-family: "Montserrat", "Fraunces", sans-serif;
    background-color: var(--cream-color);
    color: var(--gray-color);
    font-size: 14px;
    font-weight: 500;
}

.container {
    width: calc(2*(100% /5));
    margin: 200px auto;
    background-color: var(--white-color);
    overflow: hidden;
    display: flex;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.container .image {
    width: 50%;
    background: url(../images/image-product-desktop.jpg);
    background-size: cover;
}


@media (max-width: 767px) {
    .container {
        width: calc(100% - 40px);
        margin: 50px auto;
        flex-direction: column;
    }

    .container .image {
        width: 100%;
        height: 500px;
        background: url(../images/image-product-mobile.jpg);
        background-size: cover;
    }
}

.container .details {
    padding: 30px;
    width: 50%;
    display: flex;
    gap: 20px;
    flex-direction: column;
}

@media (max-width: 767px) {
    .container .details {
        width: 100%;
    }
}

.container .details .product {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.container .details h1 {
    color: var(--black-color);
    font-family: "Fraunces";
    font-weight: 700;
}

.container .details p {
    line-height: 1.8;
}

.container .details .price {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
}

.container .details .price .new-price {
    color: var(--green-color-500);
    font-family: "Fraunces";
    font-weight: 700;
    font-size: 30px;
}

.container .details .price .old-price {
    text-decoration: line-through;
}

.container .button {
    background-color: var(--green-color-500);
    color: var(--white-color);
    border: none;
    padding: 15px 0;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    display: flex;
    gap: 10px;
    cursor: pointer;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

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


.attribution {
    text-align: center;
    margin: 20px 0;
}

.attribution a {
    color: var(--black-color);
    font-style: italic;
    font-weight: 700;
    text-decoration: none;
}