<div class="product-item">
    <div class="product-item-info">
        <a href="#" class="product-item-photo">
            <span class="product-image-container">
                <img class="product-image-photo" src="https://placehold.co/200x150" alt="">
            </span>
        </a>
        <div class="product-item-details">
            <div class="sku">
                <div class="label">sku.: ERT-E103X199Z1</div>
            </div>
            <div class="product-item-name product-shortname">
                <a class="product-item-link" href="#">Versandetiketten, Thermo-Eco, 103 x 199 mm</a>
            </div>
            <div class="product-item-name product-fullname">
                <a class="product-item-link" href="#">Thermoetiketten Eco, weiß, permanent klebend, Trägerperforation,
                    103 x 199 mm, 1 Zoll Rollenkern, 500 Etiketten, 2 Rolle(n)</a>
            </div>
            <div class="list-bullet">
                <dl>
                    <dt>Druckertyp:</dt>
                    <dd>Desktopdrucker</dd>
                    <dt>Druck:</dt>
                    <dd>ohne Farbband</dd>
                    <dt>Formatgleich:</dt>
                    <dd>DHL 910-300-600 Common Label</dd>
                    <dt>Rollenkern:</dt>
                    <dd>1 Zoll</dd>
                    <dt>VE:</dt>
                    <dd>500 Etiketten auf 2 Rolle(n)</dd>
                </dl>
            </div>
            <div class="price-box">
                <span class="price">6,29&nbsp;€</span></span>
            </div>
            <div class="product-item-inner">
                <button class="tocart">
                  <span>
                    Add to cart
                  </span>
                </button>
            </div>
        </div>
    </div>
</div>

@color-main: #406aa0;
@color-white: white;
@color-black: black;
.product-item {
  max-width: 200px;
  display: flex;
  flex-direction: column;
  .product-image-photo {
    margin-bottom: 10px;
  }
  .sku {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .product-item-name {
    max-width: 220px;
    line-height: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    &.product-shortname {
      font-size: 16px;
      font-weight: 700;
      -webkit-line-clamp: 1;
      a {
        color: @color-main;
      }
    }
    &.product-fullname {
      font-size: 14px;
      font-weight: 500;
      margin-top: 10px;
      -webkit-line-clamp: 2;
      a {
        color: @color-black;
      }
    }
    a {
      text-decoration: none;
    }
  }
  .list-bullet {
    flex-direction: column;
    font-size: 14px;
    display: none;
    dl {
      display: block;
      padding-left: 20px;
      dt {
        display: list-item;
        float: left;
        list-style-type: disc;
        font-weight: 700;
        padding-right: 5px;
        color: @color-main;
      }
      dd {
        margin-bottom: 1px;
        padding-inline-start: 0;
        margin-inline-start: 0
      }
    }
  }
  .price-box {
    margin-bottom: 10px;
    text-align: right;
    .price {
      font-size: 18px;
      font-weight: 700;
    }
  }
  .tocart {
    float: right;
    font-size: 17px;
    padding: 10px 20px;
    background: @color-main;
    color: @color-white;
    border: 1px @color-main solid;
    border-radius: 3px;
  }
  // show hidden content with product-item mouse over
  &:hover {
    .product-item-name {
      display: block;
      overflow: visible;
    }
    .list-bullet {
      overflow: visible;
      display: flex;
    }
  }
}