with text-overlay

<div class="card-vertical card-shadow position-rel">
  	<strong class="overlay-text alert secondary">Out of Stock</strong>
    <div class="opacity p-s mx-auto">
      	<div class="card-img mx-auto">
        	<img src="/assets/billy-summers.webp"/>
    	</div>
        <div class="card-details">
            <div class="text-xs font-light ">Billy Summers</div>
            <div class="sub-title ">English, Hardcover, Stephen King</div>
            <div class="font-bold">Rs. 399</div>
        </div>
        <div class="card-props">
            <button class="btn btn-primary">Add to Cart</button>
            <button class="btn btn-outline outline-primary mx-xs">Save for Later</button>
        </div>
	</div>
</div>