Как зафиксировать бекграунд и ограничить текст?

Question

Сабж..

Не получается для текста увеличить контейнер, чтобы текст начинался около края карточки (оранжевая стрелочка)
Не выходит зафиксировать блок с текстом, чтобы он увеличивался сразу у всех карточек относительно блоку, в котором больше всего текста (зеленая стрелочка)

.t-store__card__textwrapper {
  background-color: #ffffff;
  padding: 50px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.t-store__card__textwrapper {
  margin-bottom: auto;
  padding-top: 20px;
}

.t-store__card .t-typography__descr {
  font-size: 16px;
  font-family: 'Montserrat';
}

.t-store__card__descr {
  margin-top: 8px;
  word-break: break-word;
}

.t-descr_xxs {
  font-size: 14px;
  line-height: 1.55;
}

.t-descr {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 300;
  color: #333333;
}

<div class="js-product t-store__card t-store__stretch-col t-store__stretch-col_33 t-align_center t-item" data-product-inv="1" data-product-lid="587043563772" data-product-uid="587043563772" data-product-gen-uid="418523647902" data-product-pack-label="lwh" data-product-pack-m="0" data-product-pack-x="0" data-product-pack-y="0" data-product-pack-z="0" data-product-url="http://***/tproduct/418523647902-jordan" data-product-part-uid="264324207742" data-card-size="small"><a href="http://***/tproduct/418523647902-jordan">    </a>
  <div class="t-store__card__imgwrapper t-store__card__imgwrapper_original-ratio t-store__card__imgwrapper_4-3 t1002__picture-wrapper" style=""><a href="http://***/tproduct/418523647902-jordan">        <img class="js-product-img t-store__card__img t-img loaded" data-original="https://static.tildacdn.com/stor3965-6664-4732-b435-653830356239/29651542.jpg" src="https://optim.tildacdn.com/stor3965-6664-4732-b435-653830356239/-/resize/664x/-/format/webp/29651542.jpg">    </a><a href="#addtofavorites" class="t1002__addBtn"><svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6.32647C20 11.4974 10.5 17 10.5 17C10.5 17 1 11.4974 1 6.32647C1 -0.694364 10.5 -0.599555 10.5 5.57947C10.5 -0.599555 20 -0.507124 20 6.32647Z" stroke="black" stroke-linejoin="round"></path></svg></a></div>


  <div class="js-product-controls-wrapper t-store__card__prod-controls-wrapper" style="display:none;">
    <div class="js-product-edition-option t-product__option" data-edition-option-id="Размер" data-view-type="buttons" data-option-type="regular">
      <div class="js-product-edition-option-name t-product__option-title t-typography__options t-descr t-descr_xxs">Размер</div>
      <div class="t-product__option-variants t-product__option-variants_regular" style="display: none;"> <select class="js-product-edition-option-variants t-product__option-select t-typography__options t-descr t-descr_xxs">
          <option value="L">L</option>
          <option value="XL">XL</option>
        </select> </div>
      <form class="t-product__option-variants t-product__option-variants_custom t-product__option-variants_buttons t-product__option-variants_simple"><label class="t-product__option-item t-product__option-item_active t-product__option-item_buttons t-product__option-item_simple"><input class="t-product__option-input t-product__option-input_buttons t-product__option-input_simple" type="radio" name="Размер" value="L" checked=""><div class="t-product__option-checkmark t-product__option-checkmark_buttons t-product__option-checkmark_simple"></div><span class="t-product__option-title t-product__option-title_buttons t-product__option-title_simple t-typography__options t-descr t-descr_xxs">L</span></label><label class="t-product__option-item t-product__option-item_buttons t-product__option-item_simple"><input class="t-product__option-input t-product__option-input_buttons t-product__option-input_simple" type="radio" name="Размер" value="XL"><div class="t-product__option-checkmark t-product__option-checkmark_buttons t-product__option-checkmark_simple"></div><span class="t-product__option-title t-product__option-title_buttons t-product__option-title_simple t-typography__options t-descr t-descr_xxs">XL</span></label></form>
    </div>
  </div>
</div>
<div class="t-store__card__textwrapper">
  <div class="js-store-prod-name js-product-name t-store__card__title t-typography__title t-name t-name_md">Jordan</div>
  <div class="t-store__card__sku t-descr t-descr_xxs" style="display:none;">Артикул: <span class="js-store-prod-sku js-product-sku" translate="no">DV7574-030</span></div>
  <div class="js-store-prod-descr t-store__card__descr t-typography__descr t-descr t-descr_xxs">Fight Heritage Cardigan Cardigan Cardigan</div>
  <div class="js-store-price-wrapper t-store__card__price-wrapper">
    <div class="t-store__card__price t-store__card__price-item t-name t-name_xs">
      <div class="t-store__card__price-from t-store__card__price-value" translate="no">от</div>
      <div class="js-product-price js-store-prod-price-val js-store-prod-price-range-val t-store__card__price-value" translate="no" data-product-price-def="10500" data-product-price-def-str="10500" data-product-price-range-val="10500">10 500</div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как зафиксировать бекграунд и ограничить текст?

Ответы (0 шт):