<commit_before>.card-outer {
  @include context-menu-button;
  background: $white;
  border-radius: $border-radius;
  display: inline-block;
  height: $card-height;
  margin-inline-end: $base-gutter;
  position: relative;
  width: 100%;

  &.placeholder {
    background: transparent;

    .card {
      box-shadow: inset $inner-box-shadow;
    }
  }

  .card {
    border-radius: $border-radius;
    box-shadow: $shadow-secondary;
    height: 100%;
  }

  > a {
    color: inherit;
    display: block;
    height: 100%;
    outline: none;
    position: absolute;
    width: 100%;

    &:-moz-any(.active, :focus) {
      .card {
        @include fade-in-card;
      }

      .card-title {
        color: $link-primary;
      }
    }
  }

  &:-moz-any(:hover, :focus, .active):not(.placeholder) {
    @include fade-in-card;
    @include context-menu-button-hover;
    outline: none;

    .card-title {
      color: $link-primary;
    }
  }

  .card-preview-image-outer {
    background-color: $background-primary;
    border-radius: $border-radius $border-radius 0 0;
    height: $card-preview-image-height;
    overflow: hidden;
    position: relative;

    &::after {
      border-bottom: 1px solid $black-5;
      bottom: 0;
      content: '';
      position: absolute;
      width: 100%;
    }

    .card-preview-image {
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      opacity: 0;
      transition: opacity 1s $photon-easing;
      width: 100%;

      &.loaded {
        opacity: 1;
      }
    }
  }

  .card-details {
    padding: 15px 16px 12px;

    &.no-image {
      padding-top: 16px;
    }
  }

  .card-text {
    max-height: 4 * $card-text-line-height + $card-title-margin;
    overflow: hidden;

    &.no-image {
      max-height: 10 * $card-text-line-height + $card-title-margin;
    }

    &.no-host-name,
    &.no-context {
      max-height: 5 * $card-text-line-height + $card-title-margin;
    }

    &.no-image.no-host-name,
    &.no-image.no-context {
      max-height: 11 * $card-text-line-height + $card-title-margin;
    }

    &.no-host-name.no-context {
      max-height: 6 * $card-text-line-height + $card-title-margin;
    }

    &.no-image.no-host-name.no-context {
      max-height: 12 * $card-text-line-height + $card-title-margin;
    }

    &:not(.no-description) .card-title {
      max-height: 3 * $card-text-line-height;
      overflow: hidden;
    }
  }

  .card-host-name {
    color: $text-secondary;
    font-size: 10px;
    overflow: hidden;
    padding-bottom: 4px;
    text-overflow: ellipsis;
    text-transform: uppercase;
  }

  .card-title {
    font-size: 14px;
    line-height: $card-text-line-height;
    margin: 0 0 $card-title-margin;
    word-wrap: break-word;
  }

  .card-description {
    font-size: 12px;
    line-height: $card-text-line-height;
    margin: 0;
    overflow: hidden;
    word-wrap: break-word;
  }

  .card-context {
    bottom: 0;
    color: $text-secondary;
    display: flex;
    font-size: 11px;
    left: 0;
    padding: 12px 16px 12px 14px;
    position: absolute;
    right: 0;
  }

  .card-context-icon {
    fill: $fill-secondary;
    margin-inline-end: 6px;
  }

  .card-context-label {
    flex-grow: 1;
    line-height: $icon-size;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.wide-layout-enabled {
  .card-outer {
    @media (min-width: $break-point-widest) {
      height: $card-height-large;

      .card-preview-image-outer {
        height: $card-preview-image-height-large;
      }

      .card-text {
        max-height: 7 * $card-text-line-height + $card-title-margin;
      }
    }
  }
}<commit_msg>Fix Bug 1443347 - Adjust styles for larger cards on wide layout<commit_after>.card-outer {
  @include context-menu-button;
  background: $white;
  border-radius: $border-radius;
  display: inline-block;
  height: $card-height;
  margin-inline-end: $base-gutter;
  position: relative;
  width: 100%;

  &.placeholder {
    background: transparent;

    .card {
      box-shadow: inset $inner-box-shadow;
    }
  }

  .card {
    border-radius: $border-radius;
    box-shadow: $shadow-secondary;
    height: 100%;
  }

  > a {
    color: inherit;
    display: block;
    height: 100%;
    outline: none;
    position: absolute;
    width: 100%;

    &:-moz-any(.active, :focus) {
      .card {
        @include fade-in-card;
      }

      .card-title {
        color: $link-primary;
      }
    }
  }

  &:-moz-any(:hover, :focus, .active):not(.placeholder) {
    @include fade-in-card;
    @include context-menu-button-hover;
    outline: none;

    .card-title {
      color: $link-primary;
    }
  }

  .card-preview-image-outer {
    background-color: $background-primary;
    border-radius: $border-radius $border-radius 0 0;
    height: $card-preview-image-height;
    overflow: hidden;
    position: relative;

    &::after {
      border-bottom: 1px solid $black-5;
      bottom: 0;
      content: '';
      position: absolute;
      width: 100%;
    }

    .card-preview-image {
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      opacity: 0;
      transition: opacity 1s $photon-easing;
      width: 100%;

      &.loaded {
        opacity: 1;
      }
    }
  }

  .card-details {
    padding: 15px 16px 12px;

    &.no-image {
      padding-top: 16px;
    }
  }

  .card-text {
    max-height: 4 * $card-text-line-height + $card-title-margin;
    overflow: hidden;

    &.no-image {
      max-height: 10 * $card-text-line-height + $card-title-margin;
    }

    &.no-host-name,
    &.no-context {
      max-height: 5 * $card-text-line-height + $card-title-margin;
    }

    &.no-image.no-host-name,
    &.no-image.no-context {
      max-height: 11 * $card-text-line-height + $card-title-margin;
    }

    &.no-host-name.no-context {
      max-height: 6 * $card-text-line-height + $card-title-margin;
    }

    &.no-image.no-host-name.no-context {
      max-height: 12 * $card-text-line-height + $card-title-margin;
    }

    &:not(.no-description) .card-title {
      max-height: 3 * $card-text-line-height;
      overflow: hidden;
    }
  }

  .card-host-name {
    color: $text-secondary;
    font-size: 10px;
    overflow: hidden;
    padding-bottom: 4px;
    text-overflow: ellipsis;
    text-transform: uppercase;
  }

  .card-title {
    font-size: 14px;
    line-height: $card-text-line-height;
    margin: 0 0 $card-title-margin;
    word-wrap: break-word;
  }

  .card-description {
    font-size: 12px;
    line-height: $card-text-line-height;
    margin: 0;
    overflow: hidden;
    word-wrap: break-word;
  }

  .card-context {
    bottom: 0;
    color: $text-secondary;
    display: flex;
    font-size: 11px;
    left: 0;
    padding: 12px 16px 12px 14px;
    position: absolute;
    right: 0;
  }

  .card-context-icon {
    fill: $fill-secondary;
    margin-inline-end: 6px;
  }

  .card-context-label {
    flex-grow: 1;
    line-height: $icon-size;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.wide-layout-enabled {
  $line-height: 23px;

  .card-outer {
    @media (min-width: $break-point-widest) {
      height: $card-height-large;

      .card-preview-image-outer {
        height: $card-preview-image-height-large;
      }

      .card-details {
        padding: 13px 16px 12px;
      }

      .card-text {
        max-height: 6 * $line-height + $card-title-margin;
      }

      .card-host-name {
        font-size: 12px;
        padding-bottom: 5px;
      }

      .card-title {
        font-size: 17px;
        line-height: $line-height;
        margin-bottom: 0;
      }

      .card-text:not(.no-description) {
        .card-title {
          max-height: 3 * $line-height;
        }
      }

      .card-description {
        font-size: 15px;
        line-height: $line-height;
      }

      .card-context {
        bottom: 4px;
        font-size: 14px;
      }
    }
  }
}
{'fraction_non_alphanumeric': 0.15008704302412335, 'fraction_numerical': 0.02151206167619995, 'mean_word_length': 2.0022396416573347, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3102640', 'n_tokens_mistral': 3085, 'n_tokens_neox': 2841, 'n_words': 534}