{SELECTOR}
<div class="grid grid-cols-12 gap-4 mt-5 pt-5 border-t border-theme-5">
    <!--/filas-->
    <a href="javascript:;" onclick="run('pedidos-menudiario-agregar-{ID}','Pedido')" class="intro-y block col-span-12 sm:col-span-4 xxl:col-span-3">
        <div class="box rounded-md p-3 relative zoom-in">
            <div class="flex-none pos-image relative block">
                <div class="font-medium text-left truncate rectangle r_{ID_CATEGORIA}">{CATEGORIA}</div>
                <div class="pos-image__preview image-fit">
                    <img alt="{ID}" src="/fotos/plato_{ID}.jpg">
                </div>
            </div>
            <div class="block font-medium text-center truncate mt-3">{NOMBRE}</div>
            <div class="block mt-3">

                <div class="font-medium text-right truncate">{PRECIO}€</div>
            </div>
        </div>
    </a>
    <!--filas/-->
</div>
<style>
    .rectangle {
        /* */
        position: absolute;
        top: 0px;
        z-index: 999;
        border-radius: .375rem;
        /* */
        text-align: end;
        padding: .3rem .8rem;
        color: #fff;
        width: 100%;
    }
    
    .r_1 {
        background: linear-gradient( 91.72deg, rgba(255, 255, 255, .3) 0, #98a0ee 61%);
    }
    
    .r_2 {
        background: linear-gradient( 91.72deg, rgba(255, 255, 255, .3) 0, #ee6e7a 61%);
    }
    
    .r_3 {
        background: linear-gradient( 91.72deg, rgba(255, 255, 255, .3) 0, #d0b070 61%);
    }
    
    .r_4 {
        background: linear-gradient( 91.72deg, rgba(255, 255, 255, .3) 0, #90CCC6 61%);
    }
</style>