.link {
  cursor: pointer;
  display: inline-grid;
  width: 156px;
  height: 136px;
  background-color: $link-background-color;
  border-radius: 8px;
  border: 1px solid transparent;
  box-shadow: 0 0 4px 0 $link-border-color;
  padding-top: 5%;
  margin-inline-start: 16px;
  margin-top: 8px;
  margin-bottom: 8px;
  transition: 0.3s cubic-bezier(.17, .04, .03, .94);

  &.dual {
    width: 328px;
  }

  .status {
    width: 48px;
    height: 48px;
    margin: auto;

    .icon {
      color: $link-icon-color;
      width: 48px;
      height: 48px;
    }
  }

  .text {
    height: 40px;
    margin: 12px;
    color: $link-color-text-font;

    .title {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
    }
  }

  &:hover {
    border-color: $link-hover-color;
  }

  &.is-selected {
    border: 2px solid $link-selected-color;
  }

  &:focus:not(.is-selected) {
    @include focus-state();
  }
}