.index .content .card {
  position: relative;
  display: inline-block;
  height: 3.15rem;
  background: var(--s-color);
  box-shadow: #0000001a 0px 4px 10px 0px, #0000002a 0px 0px 1px 0px;
  border: .1rem solid var(--hr-color);
  padding: .75rem 1rem;
  margin: .25rem 0;

  h4 {
    display: inline-block;
    width: 80%;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0;
    margin: 0;
  }

  span {
    position: absolute;
    top: .95rem;
    right: 1.5rem;
    font-size: 1.15rem;
  }

  &:hover {
    h4,
    span {
      color: var(--t-color);
    }
  } 
}

@media only screen and (max-width: 480px) {
  .index .content .card {
    display: block;
    margin: .75rem 0;
  }
}