@mixin root() { ... }@mixin root() { 
  border-radius: border.get('br02f');
  overflow: hidden;
  background-color: var(--kib-article-card-variant-background, #{color.get('ui-bg', 'primary')});
  color: color.get('text', 'primary');
  position: relative;

  &--transparent {
    &:hover,
    &:focus-within {
      @include elevation.elevation('none');
    }
  }

  &:focus-within {
    border: unit.rem(2px) solid color.get('action', 'cta', 'primary', 'primary');
    border-radius: border.get('br02f');
    text-decoration: none;
    @include elevation.elevation('medium');

    .kib-article-profile {
      &__title {
        text-decoration: underline;
      }
    }
  }

  // Modern browsers: Only apply hover when card has links
  @supports (selector(:has(*))) {
    &:has(a):hover {
      cursor: pointer;
      text-decoration: none;
      @include elevation.elevation('medium');

      .kib-article-profile {
        &__title {
          text-decoration: underline;
        }
      }
    }

    &:has(a):hover {
      text-decoration: none;
      @include elevation.elevation('medium');
    }

    &--transparent {
      &:has(a):hover,
      &:has(a):focus-within {
        @include elevation.elevation('none');
      }
    }
  }
 }

@mixin size($type) { ... }@mixin size($type) { 
  @if $type == 'standard' {
    min-width: unit.rem(200px);
    max-width: unit.rem(400px);
  } @else if $type == 'landscape' {
    min-width: unit.rem(320px);
    max-width: unit.rem(400px);
  } @else if $type == 'landscape-condensed' {
    min-width: unit.rem(230px);
    max-width: unit.rem(350px);
  }
 }

@mixin variant($variant) { ... }@mixin variant($variant) { 
  @if $variant == 'primary' {
    --kib-article-card-variant-background: #{color.get('ui-bg', '03')};
  } @else if $variant == 'tint' {
    --kib-article-card-variant-background: #{color.get('ui-bg', '16')};
  } @else if $variant == 'transparent' {
    --kib-article-card-variant-background: transparent;

    border-radius: 0;
  }
 }

@mixin landscape-layout() { ... }@mixin landscape-layout() { 
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: spacing.get('s2');
 }

@mixin landscape-transparent() { ... }@mixin landscape-transparent() { 
  flex-direction: row;
  justify-content: flex-start;
 }