Исправлена ​​ошибка, из-за которой кнопка привязки тега занимала всю ширину изображения

моя кнопка a.shop-now занимает всю высоту изображения, а это было не то, что я хотел.

HTML:

<div class = "carousel-cell">
    <picture> ... </picture>
    <a class = "shop-now" href = "#"></a>   
</div>

CSS для .carousel-cell:

position: relative;
width: 100%;

CSS для a.shop-now:

bottom: 0;
display: block;
font-size: 13px;
font-weight: 400;
line-height: 130%;
padding: 13px 15px;
position: absolute;
right: 0;
width: auto;

Я не уверен, чего мне здесь не хватает — цель состоит в том, чтобы кнопка отображалась внизу изображения, не накладываясь на нее. Любые указатели будут высоко оценены, спасибо!