.card {
  display: block;
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-xs);

  overflow: hidden;
  transition: all var(--duration-md);
  text-decoration: none;
  cursor: default;
}

.card:hover {
  border-color: var(--color-accent);
}

.card--link {
  cursor: pointer;
}

.card--flex {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.card--full-height {
  height: 100%;
}

/* Светлая карточка */
.card--primary {
  background: var(--color-white);
  border-color: var(--color-secondary);

  color: var(--color-primary);
}

.card--primary:hover {
  /* border-color: var(--color-accent); */
}

/* Красная карточка */
.card--secondary {
  background: var(--color-accent);
  border-color: var(--color-accent);

  color: var(--color-secondary);
}

.card--secondary:hover {
  background: var(--color-secondary);
  color: var(--color-primary);
}

/* Серая карточка */
.card--tertiary {
  background: var(--color-bg);
  border-color: var(--color-grey-border);

  color: var(--color-text);
}

.card--tertiary:hover {
  border-color: var(--color-white-lighter);
}

/* Верхняя часть карточки */
.card__header {
  position: relative;
  overflow: hidden;
}

.card__header--horizontal {
  aspect-ratio: 4/3;
}

.card__header--square {
  aspect-ratio: 1 / 1;
}

.card__header--wide {
  aspect-ratio: 16 / 9;
}

.card__header--space {
  padding: var(--space-md) var(--space-md) 0;
}

/* Картинка */

.card .card__header-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__header-image--contain {
  object-fit: contain;
}

.card__header-image--scale {
  transition: transform var(--duration-lg);
}

.card:hover .card__header-image--scale {
  transform: scale(1.05);
}

.card__header-image--brand {
  max-width: 120px;
  max-height: 50px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
}

.card:hover .card__header-image--brand {
  filter: grayscale(0%);
  opacity: 1;
}

/* Контент */
.card__content {
  padding: var(--space-md);
}

.card__content--center {
  text-align: center;
}

.card__content--grow {
  flex-grow: 1;
}

/* Заголовок */
.card__title {
  font-size: clamp(
    var(--font-size-sm),
    var(--font-size-base-l),
    var(--font-size-md)
  );
  font-weight: 600;
  margin: 0;

  transition: color var(--duration-md);
}

.card__title--small {
  font-size: clamp(
    var(--font-size-sm),
    var(--font-size-base),
    var(--font-size-base-l)
  );
  font-weight: 400;
}

.card--primary .card__title,
.card--tertiary .card__title {
  color: var(--color-text); /* лучше #333333 */
}

.card--primary:hover .card__title,
.card--tertiary:hover .card__title {
  color: var(--color-accent);
}

.card--secondary .card__title {
  color: var(--color-secondary);
}

.card--secondary:hover .card__title {
  color: var(--color-primary);
}

/* Мета */
.card__meta {
  /* margin-top: var(--space-xs); */
  font-size: clamp(var(--font-size-xs), 2vw, var(--font-size-base));
}

.card--primary .card__meta,
.card--tertiary .card__meta {
  color: #888888;
}

.card--secondary .card__meta {
  color: var(--color-secondary);
}

.card--secondary:hover .card__meta {
  color: var(--color-primary);
}

/* Описание */
.card__description {
  margin-top: var(--space-sm);
  font-size: var(--font-size-base);
}

/* Действия */
.card__actions {
  margin-top: var(--space-md);
}

/* Карточка только с картинкой, например бренд */
.card--image-only {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.card--image-only .card__header {
  width: 100%;
}

.card--image-only .card__header-image {
  object-fit: contain;
}