@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../assets/teaser/teaser.scss" as *;

.ds-teaser.ds-teaser--onsite {
  padding: ds-spacing($ds-s-100);
  display: flex;

  .ds-teaser__title {
    color: $ds-theme-color;
    @include ds-typography($ds-typography-functional-label-sm);
  }

  @include ds-hover(true) {
    .ds-teaser__title {
      text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
    }

    .ds-teaser__text {
      @include ds-underline();
    }
  }

  .ds-teaser__text {
    margin-top: ds-spacing($ds-s-025);
    @include ds-typography($ds-typography-functional-heading-xxs, $lineHeight: $ds-lineheight-md);
  }

  .ds-teaser__media {
    margin-right: ds-spacing($ds-s-100);
    width: 56px;
    height: 56px;
  }
}