.product-container {
    width: 100%;
    overflow: hidden;
}

.product {
    overflow: hidden;
}

.product img {
    max-width: 35%;
    height: auto;
}

.product.left img {
    float: left;
    margin-right: 20px;
}

.product.right img {
    float: right;
    margin-left: 20px;
}

/* Clearfix hack */
.product-container::after {
    content: "";
    display: table;
    clear: both;
}

.product-tarieven {
    font-size: 1.2rem;
    font-weight: normal;
    color: #cd1c00;
}

.product-name {
    font-size: 1.0rem;
    font-weight: bold;
}

.product-description {
    color: #666;
}




@media screen and (max-width: 850px) {
    .product img {
        max-width: 40%;
    }

    .product.left img {
        margin-left: 20px !important;
    }
    .product.right img {
        margin-right: 20px !important;
    }

    /* switch desktop and mobile for left-side produts. This way the heading is always closest to the text. */
    .product.left h2.desktop-only {
        display: block !important;
    }
    .product.left h2.mobile-only {
        display: none !important;
    }
}