.content-card[data-astro-cid-gizzzcig] {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 0;
  padding: var(--space-3);
  border-radius: var(--nav-panel-radius);
  background: var(--color-surface-raised);
  box-shadow: 0 4px 20px #2b1e4f0e;
  transition: transform .25s, box-shadow .25s;
}

.card-copy[data-astro-cid-gizzzcig] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
}

.primary-category[data-astro-cid-gizzzcig] {
  text-decoration: none;
}

a[data-astro-cid-gizzzcig].primary-category:hover {
  text-decoration: none;
}

a[data-astro-cid-gizzzcig].primary-category {
  position: relative;
  z-index: 2;
}

.featured[data-astro-cid-gizzzcig] {
  display: grid;
  align-items: center;
  gap: 0;
}

.featured[data-astro-cid-gizzzcig] .secondary-categories[data-astro-cid-gizzzcig] {
  margin-top: 0;
}

@media (width >= 800px) {
  .featured[data-astro-cid-gizzzcig]:has(.card-image) {
    grid-template-columns: 1fr 1fr;
  }

  .featured[data-astro-cid-gizzzcig] .card-copy[data-astro-cid-gizzzcig] {
    padding: var(--page-gutter);
  }
}

.card-media[data-astro-cid-gizzzcig] {
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--nav-panel-radius) - 10px);
}

.card-image[data-astro-cid-gizzzcig] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .3s;
}

@media (hover: hover) {
  .content-card[data-astro-cid-gizzzcig]:hover .card-image[data-astro-cid-gizzzcig] {
    transform: scale(1.04);
  }

  .content-card[data-astro-cid-gizzzcig]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 26px #2b1e4f14;
  }
}

.content-card[data-astro-cid-gizzzcig]:focus-within .card-image[data-astro-cid-gizzzcig] {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .card-image[data-astro-cid-gizzzcig], .content-card[data-astro-cid-gizzzcig] {
    transition: none;
  }

  .content-card[data-astro-cid-gizzzcig]:hover, .content-card[data-astro-cid-gizzzcig]:hover .card-image[data-astro-cid-gizzzcig], .content-card[data-astro-cid-gizzzcig]:focus-within .card-image[data-astro-cid-gizzzcig] {
    transform: none;
  }
}

.card-meta[data-astro-cid-gizzzcig] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.primary-category[data-astro-cid-gizzzcig] {
  padding: var(--space-1) var(--space-3);
  border-radius: 6px;
  background: var(--color-surface-hover);
  color: var(--color-accent);
  font-size: var(--type-meta-size);
  font-weight: var(--type-weight-medium);
}

.content-card[data-astro-cid-gizzzcig] .card-title[data-astro-cid-gizzzcig] {
  margin: 0;
  font-size: var(--type-subheading-size);
  line-height: var(--type-subheading-line);
  font-weight: var(--type-heading-weight);
  letter-spacing: normal;
}

.content-card[data-astro-cid-gizzzcig].featured .card-title[data-astro-cid-gizzzcig] {
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line);
  letter-spacing: var(--type-heading-tracking);
}

.card-title[data-astro-cid-gizzzcig] a[data-astro-cid-gizzzcig] {
  text-decoration: none;
}

.card-title[data-astro-cid-gizzzcig] a[data-astro-cid-gizzzcig]:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--nav-panel-radius);
}

.card-title[data-astro-cid-gizzzcig] a[data-astro-cid-gizzzcig]:focus-visible {
  outline: none;
}

.card-title[data-astro-cid-gizzzcig] a[data-astro-cid-gizzzcig]:focus-visible:after {
  outline: 2px solid var(--color-accent);
  outline-offset: 5px;
}

.card-title[data-astro-cid-gizzzcig] a[data-astro-cid-gizzzcig]:hover {
  text-decoration: none;
}

.content-card[data-astro-cid-gizzzcig] .card-description[data-astro-cid-gizzzcig] {
  margin: 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--color-text-muted);
}

.secondary-categories[data-astro-cid-gizzzcig] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  padding-top: var(--space-1);
}

.content-card[data-astro-cid-gizzzcig] .secondary-categories[data-astro-cid-gizzzcig] li[data-astro-cid-gizzzcig] {
  padding: var(--space-1) var(--space-3);
  border-radius: 6px;
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  font-size: var(--type-label-size);
  line-height: var(--type-body-line);
}

time[data-astro-cid-gizzzcig] {
  font-size: var(--type-meta-size);
  color: var(--color-text-muted);
}

.demo-label[data-astro-cid-gizzzcig] {
  font-size: var(--type-label-size);
  color: var(--palette-amber);
}