@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600;1,9..144,700&family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

 .card {
    background-color: #fff;
    border-radius: 10px;
 }

 .card-image {
    background: url("./../../img/image-product-mobile.jpg") no-repeat;
    background-size: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 240px;
 }

 .card-body {
    padding: 24px;
 }

 .card-body__product-title .card-product-type {
     font-family: 'Montserrat', sans-serif;
     font-weight: 500;
     font-size: 0.75rem;
     letter-spacing: 5px;
     color: #6C7289;
 }

 .card-body__product-title .card-title {
     font-family: 'Fraunces', sans-serif;
     font-size: 2rem;
     font-weight: 700;
     letter-spacing: 0px;
     line-height: 32px;
     color: #000;

     margin-top: 0;
 }

 .card-body__product-content .card-content {
     font-family: 'Montserrat', sans-serif;
     font-size: 0.875rem;
     line-height: 23px;
     color: #6C7289;
 }

 .card-body__product-content__currency {
    align-items: center;
    flex-wrap: wrap;
    display: flex;

    margin-top: 24px;
    margin-bottom: 20px;
 }

 .card-body__product-content__currency .current-currency {
     font-family: 'Fraunces', sans-serif;
     font-size: 2rem;
     font-weight: 700;
     color: #3D8168;

     margin-right: 20px;
 }

 .card-body__product-content__currency .old-currency {
     font-family: 'Montserrat', sans-serif;
     font-size: 0.813rem;
     font-weight: 500;
     color: #6C7289;
     text-decoration: line-through;
 }

@media screen and (min-width: 767px) {

    .card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-self: center;

        max-width: 600px;
    }

    .card-image {
        background: url("./../../img/image-product-desktop.jpg") no-repeat;
        background-size: cover;
        border-top-right-radius: 0px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        height: 100%;
    }

    .card-body {
        padding: 32px;
    }

    .card-body__product-title .card-title {
        margin-top: 20px;
    }
}