product-card

<style>
    .product-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #c9e7e7;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
        background: #fff;
        font-family: sans-serif;
        flex-wrap: wrap;
    }

    .product-image {
        max-width: 93px;
        margin-right: 15px;
    }

    .product-details {
        flex: 1;
        min-width: 200px;
    }

    .product-title {
        font-family: sans-serif;
        font-size: 24px;
        color: #000;
        letter-spacing: .25px;
        display: block;
        padding: 0;
        /* width: calc(100% - 540px); */
        text-align: left;
        margin-right: 12px;
        /* float: left; */
        margin-bottom: 0;
    }

    .product-mkt {
        font-size: 14px;
        color: #aaa;
        font-style: italic;
        margin-top: 0px;
    }

    .product-pricing {
        text-align: right;
        min-width: 160px;
    }

    .product-price {
        font-size: 16px;
        font-weight: bold;
        color: #ec407a;
    }

    .product-mrp {
        font-size: 14px;
        color: #444;
        text-decoration: line-through;
        margin-left: 5px;
    }

    .product-discount {
        font-size: 13px;
        color: green;
        margin-bottom: 5px;
    }

    .add-to-cart-btn {
        background-color: #1eb7c1;
        color: white;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        padding: 10px 15px;
        border-radius: 5px;
        margin-top: 5px;
    }

    @media screen and (max-width: 600px) {
        .product-title {
            font-family: sans-serif;
            font-size: 11px;
            color: #000;
            letter-spacing: .25px;
            display: block;
            padding: 0;
            /* width: calc(100% - 540px); */
            text-align: left;
            margin-right: 12px;
            /* float: left; */
            margin-bottom: 0;
        }

        .product-pricing {
            text-align: left;
            min-width: 160px;
            margin-top: 10px;
        }

        /* .product-pricing {
            text-align: center;
            margin-top: 10px;
        }

        .add-to-cart-btn {
            width: 100%;
        } */
    }
</style>

<div class="product-card">
    <img class="product-image" src="{{ product.featured_image | img_url: '100x' }}" alt="{{ product.title }}">

    <div class="product-details">
        <p class="product-title">{{ product.title }}</p>
        <p class="product-mkt">Mkt: {{ product.vendor }}</p>
    </div>

    <div class="product-pricing">
        {% if product.compare_at_price > product.price %}
        {% assign savings = product.compare_at_price | minus: product.price %}
        {% assign discount_percentage = savings | times: 100 | divided_by: product.compare_at_price %}
        <div class="product-discount">{{ discount_percentage | round }}% off</div>
        {% endif %}

        <div>
            <span class="product-price">{{ product.price | money }}</span>
            {% if product.compare_at_price > product.price %}
            <span class="product-mrp">MRP {{ product.compare_at_price | money }}</span>
            {% endif %}
        </div>

        <a class="add-to-cart-btn" href="/cart/add?id={{ product.variants.first.id }}">ADD TO CART</a>
    </div>
</div>