.Card {
  overflow: hidden;
  background: var(--surface-base);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  transition: transform var(--tap), box-shadow var(--tap);
}

.Card:hover { transform: translateY(-0.25em); box-shadow: var(--shadow-lift); }

.Card-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
}

.Card-media svg { width: 100%; height: 100%; display: block; }

.Card-body { padding: var(--space-s) var(--space-s) var(--space-m); }
.Card-title { margin-bottom: 0.4em; }
.Card-text { margin-bottom: 0; color: var(--text-secondary); font-size: 0.95em; }

.Card-index {
  position: absolute;
  top: 0.7em;
  left: 0.8em;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--action-primary);
  background: rgba(255, 255, 255, 0.86);
  border-radius: var(--radius-pill);
  padding: 0.3em 0.75em;
}


.Carousel { position: relative; }

.Carousel-track {
  display: flex;
  gap: var(--space-s);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.6em 0.4em var(--space-s);
  margin: 0 -0.4em;
  scrollbar-width: none;
}

.Carousel-track::-webkit-scrollbar { display: none; }

.Carousel-track > .Card {
  flex: 0 0 20.5em;
  scroll-snap-align: start;
}

.Carousel-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-xs);
}

.Carousel-dots { display: flex; align-items: center; gap: 0.05em; }

.Carousel-dot {
  width: 2.75em;
  height: 2.75em;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.Carousel-dot::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--line-soft);
  transition: background var(--tap), transform var(--tap);
}

.Carousel-dot.is-active::before { background: var(--action-bright); transform: scale(1.4); }
.Carousel-dot:hover::before { background: var(--action-primary); }

@media (max-width: 768px) {
  .Carousel-track > .Card { flex: 0 0 82%; }
}