/* CARD BLOCK */

.card {
  --padding: var(--space-16);
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--padding);
  background-color: var(--color-background);
  border-radius: var(--rounded-2xl);
  row-gap: var(--row-gap);
}

.card__title > a {
  font: inherit;
  color: currentColor;
}

.card__meta {
  font-size: var(--text-sm);
  margin-bottom: var(--space-16);
}

.card__images {
  display: grid;
  position: relative;
  width: 100%;
  border: 4px solid var(--color-grey-50);
  border-radius: var(--rounded-2xl);
  overflow: hidden;
  margin-bottom: var(--space-16);
  aspect-ratio: 408/220;
  background-color: var(--color-grey-50);
}
.card__images[data-count] {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 50%);
  gap: 4px;
}
.card__images[data-count] > :first-child {
  grid-row-end: span 2;
}
.card__images > img {
  height: 100%;
  width: 100%;
}
.card__images[data-count]::after {
  content: '+'attr(data-count);
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  background-color: var(--color-black-70);
  color: var(--color-white);
  border-radius: var(--rounded-lg);
  padding: .4rem var(--space-12) var(--space-8);
  font-size: var(--text-sm);
  font-weight: 500;
  height: 2.25rem; /* 36px */
}

.card--cta {
  border: 2px solid transparent;
  cursor: pointer;
  align-items: center;
  text-align: center;
}
.card--cta svg {
  color: var(--color-grey-800);
}
.card--cta:hover {
  background-color: var(--color-primary-10);
  border-color: var(--color-primary-10);
}
.card--cta:hover svg,
.card--cta:hover h2 {
  color: var(--color-primary-100);
}
