.card {
  border-radius: var(--border-radius);
  background: var(--color-background, #fff);
}

.card--image-header {
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.card__image {
  width: 100%;
  display: block;
  background: var(--color-contrast, #f9fafb);
}

.card__image--cover {
  height: 150px;
  object-fit: cover;
}

.card__content {
  padding: 1.5rem;
}

.card__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--fg, var(--color-text));
}

.card__text {
  color: var(--fg-muted, var(--color-text-muted));
  font-size: 0.875rem;
  margin: 0;
}

.card__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fg-muted, var(--color-secondary));
  margin-top: 0.75rem;
}

.card__attribution {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 1rem 0 0;
  color: var(--color-text-muted);
}

.card--minimal {
  border: 1px solid var(--color-border);
  padding: 1rem;
}

.card + .card {
  margin-top: 1rem;
}

.card--secondary {
  border-color: var(--color-secondary);
  background: var(--color-contrast);
}

.card--horizontal {
  display: flex;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.card--horizontal .card__image {
  width: 220px;
  height: auto;
  flex-shrink: 0;
  object-fit: cover;
}

@media (max-width: 575px) {
  .card--horizontal {
    flex-direction: column;
  }

  .card--horizontal .card__image {
    width: 100%;
    height: 150px;
  }
}