.card {
  display: block;
  width: var(--min-width, 300px);
  max-width: 100%;
  height: fit-content;
  background-color: var(--color-background-active);
  color: var(--color-text-active);
  text-decoration: none !important;
  border-radius: var(--border-radius);
  --flow-space: var(--space-xs);

  &:hover {
    color: var(--color-text-active);

    .info .title {
      text-decoration: underline;
    }
  }

  .cover-image {
    aspect-ratio: attr(width) / attr(height);
    max-width: 100%;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  }

  .info {
    padding: var(--space-2xs);
    padding-top: 0;    

    * { 
      font-size: var(--font-size-min);
    }

    .title {
      font-size: var(--font-size-step-1);
    }
  }
}