@import "../../../src/scss/init";

:root {
  --product-teaser-image-height: 135px;
}

.product-teaser {
  position: relative;

  --media-height: var(--product-teaser-image-height);

  $root: &;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 1rem;

  &__image {
    position: relative;
    overflow: hidden;
    align-content: center;
    border: 1px solid $color-gray;
    border-radius: 0.5rem;

    @include media-breakpoint-up(lg) {
      height: 205px;
    }

    img {
      @include centered-absolute;

      width: auto;
      height: 100%;
    }
  }

  &__product-content {
    padding: var(--content-spacer-s) 0 var(--content-spacer-xs);
    color: var(--product-teaser-text-color);

    .heading {
      @include typography('card-title');

      min-height: 3rem;
    }

    .categories {
      color: var(--category-text);
      margin-bottom: var(--content-spacer-xs);
    }
  }

  &__link {
    @include filling-absolute;
  }

  .product-button {
    width: fit-content;
  }

  &:hover .heading {
    text-decoration: underline;
  }
}
