How to make a discount price in opencart3 in this format?

Question

css

I want to make a price in a similar format - here is the code and styles that cost and the photo how it looks with this code

<section class="section fake-class-a wow fadeInLeft" >
  <div class="container">
    <h3 class="section-maintitle">{{ heading_title }}</h3>
    <div class="row catalogs" data-slick='{"slidesToShow": 5, "slidesToScroll": 5}'> {% for product in products %}
      <div class="product-layout">
        <div class="product-thumb transition">
          <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="section-img" /></a>
          
          <div class="">
            <!--<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>-->
            
            {% if product.rating %}
            <div class="rating">{% for i in 1..5 %}
              {% if product.rating < i %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> {% endif %}
              {% endfor %}</div>
            {% endif %}
            {% if product.price %}
            <div class="price row section-row "> {% if not product.special %}
              <div class="section-price col-sm-6">{{ product.price }}</div>
              
                {% else %} <span class="price-new section-price col-sm-6">{{ product.special }}</span>
                <span class="price-old section-stock section-price" >{{ product.price }}</span> {% endif %}
              <button  class="button-buy col-sm-5" type="button" onclick="cart.add('{{ product.product_id }}');">{{ button_cart }}</button>
              {% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %}
            </div>
            <p class="section-description" >{{ product.description }}</p>
            {% endif %} </div>
          <div class="button-group">
            
            <button class="btn-bookmarks" type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><img src="catalog/view/theme/default/image/bookmarks.png"></button>
           
          </div>
        </div>
      </div>
      {% endfor %} </div>
  </div>
</section>

.section {
  padding: 3% 6.1%;
}
.section-maintitle {
  font-size: 66px;
  line-height: 1;
    margin-left: -1%;
}
.section-price {
  font-size: 35px;
  white-space: nowrap;
}
.section-stock {
  color: #c1c1c1;
  text-decoration: line-through;
  line-height: 0.8;
  margin-bottom: 0;
    position: relative;
    top: 2%;
    left: 2%;
    font-size: 30px;
}
.section-description {
  font-size: 22.5px;
  text-align: left;
  padding-top: 10px;
  color: #848586;
  width: 90%;
}
.section-img {
    padding-bottom: 15px;
    width: 95%;
}
.section-row {
    width: 105%;
}