.product-component {
  &-name {
    $font-size: font-px-to-rem(12px);

    font-weight: 500;
    color: $font-color;
    font-size: $font-size;
    line-height: $font-size;
    margin-top: calc-spacer(2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    @include media-breakpoint-up(md) {
      $font-size: font-px-to-rem(18px);

      font-size: $font-size;
      line-height: $font-size;
      margin-top: calc-spacer(3);
    }
  }

  &-price {
    $font-size: font-px-to-rem(14px);

    color: $font-color;
    font-weight: 600;
    font-size: $font-size;
    line-height: $font-size;
    margin-top: calc-spacer(2);

    @include media-breakpoint-up(md) {
      $font-size: font-px-to-rem(20px);

      font-size: $font-size;
      line-height: $font-size;
      margin-top: calc-spacer(3);
    }
  }
}

.product-component-image {
  width: 100%;
  display: block;
}
