.tool-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;

  width: 270px;
  min-width: 200px;
  max-width: 350px;

  border-radius: 10px;
  box-shadow:
    0px 3px 5px 0px rgba(22, 38, 9, 0.20000000298023224),
    0px 1px 2px 0px rgba(22, 38, 9, 0.20000000298023224);
  background: #ffffff;

  /* Mobile */
  @media (max-width: 767.5px) {
    width: 100%;
    max-width: 420px;
    flex: 1 1 100%;
    margin: 0 auto;
  }

  a {
    cursor: pointer;
  }

  .top {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;

    img {
      width: 40px;
      height: 40px;
      border-radius: 5px;
      background-color: white;
    }

    .name {
      font-weight: 700;
      color: var(--primary-color-700);
      /* allow truncation so score can appear on the right */
      flex: 1 1 auto;
      min-width: 0; /* important to make text-overflow work inside flex */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .score {
      flex: 0 0 auto;
      margin-left: 8px;
      font-weight: 700;
      color: var(--grey-600);
      white-space: nowrap;
    }
  }

  .service {
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--grey-500);

    .fas {
      font-size: 16px;
    }
  }

  .description {
    /* Limit to 5 lines */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .actions {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: auto;

    .btn-secondary {
      color: white;
      border-color: white;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
    }
    .compare-link {
      color: white;
      text-decoration: underline;
    }
  }

  :not(.active)& {
    cursor: pointer;

    .name {
      pointer-events: none;
    }

    .actions {
      display: none;
    }
  }

  .active& {
    background: var(--primary-color-500);
    color: white;

    .name {
      color: white;
    }

    .score {
      color: white;
      opacity: 0.95;
    }

    .service {
      color: white;
      opacity: 0.8;
    }
  }
}