.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);
}
.pagination {
  --gutter: var(--space-xs-s);
}

.pagination li {
  color: var(--pagination-text, var(--color-text));
  background-color: var(--pagination-bg, var(--color-bg));
  border: 3px solid var(--pagination-border, var(--color-bg-accent));
  border-radius: var(--border-radius-medium);
}

.pagination li:not(:has(a)) {
  padding: var(--space-xs) var(--space-s-m);
  opacity: 0.6;
}

.pagination a {
  padding: var(--space-xs) var(--space-s-m);
  text-decoration: none;
  display: block;
}

.pagination li:not(:has(a)) {
  padding: var(--space-xs) var(--space-s-m);
  opacity: 0.6;
}

.pagination li:has(a:hover) {
  --pagination-bg: var(--color-bg-accent);
  --pagination-border: var(--color-bg-accent);
}

.pagination li:has(a[aria-current='page']) {
  --pagination-bg: var(--color-secondary);
  --pagination-border: var(--color-secondary);
  --pagination-text: var(--color-light);
}