.cards
{
  padding-top: 10px;
  padding-bottom: 10px;
  .make-row();
}

.card
{
  display: block; // Override the inline-block from `.img-thumbnail`
  margin-bottom: @line-height-computed;
  padding: 0;
  position: relative;
  overflow: hidden;
  .box-shadow(0 1px 2px rgba(0,0,0,.075));
  .transition(all, @animation-speed-normal, @animation-type);
  border-radius: @border-radius-base;
  border: 1px solid @card-border-color;

  > img
  {
    .opacity(1);
    .img-responsive();
  }

  > .media-wrapper
  {
    .opacity(1);
    display: block;
    background-color: @color-gray-pale;
    overflow: hidden;
    text-align: center;
    width: 100%;
    .transition(all, @animation-speed-normal, @animation-type);
    > img
    {
      max-width: 100%;
      vertical-align: middle;
    }
  }

  .card-heading
  {
    display: block;
    margin: 0;
    padding: 10px;
    .text-overflow();
  }

  .card-content,.card-actions
  {
    padding: 0 10px 10px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &:hover
  {
    .box-shadow(~"0 1px 5px rgba(0,0,0,.175)");
    text-decoration: none;

    > img,
    > .media-wrapper
    {
      .opacity(0.9);
      background-color: #e5e5e5;
    }

    > .card-reveal
    {
      top: 0;
    }
  }
}

.cards-borderless
{
  .card
  {
    border: none;
    box-shadow: none;

    > .card-heading,
    > .card-actions,
    > .card-content
    {
      padding-left: 0;
      padding-right: 0;
    }
  }
}
