.card {
  background-color: var(--color-bg-accent);
  border: 4px solid var(--color-bg-accent);
  color: var(--color-text);
  padding: var(--space-s-m);
  border-radius: var(--border-radius-medium);
  max-inline-size: unset;
}

.card ::-moz-selection {
  color: var(--color-dark);
  background-color: var(--color-secondary);
}

.card ::selection {
  color: var(--color-dark);
  background-color: var(--color-secondary);
}

.card h2,
.card h3 {
  font-family: var(--font-base);
  font-size: var(--size-step-2);
}

.card h2 a,
.card h3 a {
  text-decoration: none;
}

.card:hover,
.card:focus-within {
  border: 4px dashed var(--color-primary);
}

/* 'clickable' */

.card:focus-within a:focus {
  outline: none;
}

.card {
  position: relative;
}

.card a:after {
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.blogcards {
  --gutter: var(--space-l);
}

/* Status badges for special post states */

.status-badge {
  display: inline-block;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--border-radius-small);
  font-size: var(--size-step-min-2);
  font-weight: var(--font-bold);
  line-height: 1;
  position: relative;
  z-index: 1;
}

.status-badge--garden {
  background-color: var(--color-accent);
  color: var(--color-light);
}