:root {
  --mb-bg: rgba(9, 10, 12, 0.82);
  --mb-bg-soft: rgba(14, 16, 18, 0.66);
  --mb-glass: rgba(255, 255, 255, 0.08);
  --mb-glass-strong: rgba(255, 255, 255, 0.12);
  --mb-glass-border: rgba(255, 255, 255, 0.16);
  --mb-text: rgba(255, 255, 255, 0.96);
  --mb-muted: rgba(255, 255, 255, 0.7);
  --mb-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  --mb-shadow-strong: 0 30px 90px rgba(0, 0, 0, 0.42);
  --mb-radius: 0px;
  --mb-gap: 18px;
  --mb-blur: 18px;
  --mb-hover-scale: 1.045;
  --mb-glow: 0 0 0 1px rgba(255,255,255,0.08), 0 18px 60px rgba(0,0,0,0.24);
}

.mb-cg {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: clamp(14px, 2vw, 28px) 0;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.045), transparent 34%),
    radial-gradient(circle at 15% 50%, rgba(255,255,255,0.025), transparent 32%),
    linear-gradient(180deg, rgba(5,6,8,0.98), rgba(8,9,11,0.96));
}

.mb-cg::before,
.mb-cg::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(56px, 8vw, 140px);
  z-index: 2;
  pointer-events: none;
}

.mb-cg::before {
  left: 0;
  background: linear-gradient(90deg, rgba(4, 5, 7, 0.9), rgba(4, 5, 7, 0));
}

.mb-cg::after {
  right: 0;
  background: linear-gradient(270deg, rgba(4, 5, 7, 0.9), rgba(4, 5, 7, 0));
}

.mb-cg__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: clamp(520px, 68vh, 920px);
  perspective: 1800px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,0.06), transparent 40%),
    linear-gradient(180deg, rgba(6,7,9,0.98), rgba(9,10,12,0.94));
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -30px 90px rgba(0,0,0,0.4);
  isolation: isolate;
}

.mb-cg__track {
  position: relative;
  width: 100%;
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}

.mb-cg__row {
  position: absolute;
  left: 0;
  display: flex;
  gap: var(--mb-gap);
  will-change: transform;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

.mb-cg__card {
  --mb-cg-card-x: 0px;
  --mb-cg-card-y: 0px;
  --mb-cg-card-z: 0px;
  --mb-cg-card-scale: 1;
  --mb-cg-card-rotate-x: 0deg;
  --mb-cg-card-rotate-y: 0deg;
  --mb-cg-card-rotate-z: 0deg;
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: var(--mb-radius);
  cursor: pointer;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255,255,255,0.05);
  transform: translate3d(var(--mb-cg-card-x), var(--mb-cg-card-y), var(--mb-cg-card-z)) rotateX(var(--mb-cg-card-rotate-x)) rotateY(var(--mb-cg-card-rotate-y)) rotateZ(var(--mb-cg-card-rotate-z)) scale(var(--mb-cg-card-scale));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    filter 420ms cubic-bezier(.22,.61,.36,1),
    opacity 320ms ease,
    box-shadow 420ms ease;
}

.mb-cg__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 38%, rgba(0,0,0,0.32));
  opacity: 0.82;
  pointer-events: none;
}

.mb-cg__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 28%, rgba(255,255,255,0));
  opacity: 0.58;
  pointer-events: none;
  mix-blend-mode: screen;
}

.mb-cg__media,
.mb-cg__img {
  display: block;
  width: 100%;
  height: 100%;
}

.mb-cg__img {
  object-fit: cover;
  transform: scale(1.018);
  transition: transform 600ms cubic-bezier(.22,.61,.36,1), filter 420ms ease;
  filter: saturate(0.965) contrast(1.03) brightness(0.985);
}

.mb-cg.is-hovering .mb-cg__card {
  filter: blur(var(--mb-cg-blur-others, 6px)) brightness(var(--mb-cg-dim-others, .72)) saturate(.9);
  opacity: .94;
}

.mb-cg.is-hovering .mb-cg__card.is-active,
.mb-cg__card:focus-visible {
  filter: none;
  opacity: 1;
  z-index: 10;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255,255,255,0.1);
}

.mb-cg__card.is-active .mb-cg__img,
.mb-cg__card:hover .mb-cg__img,
.mb-cg__card:focus-visible .mb-cg__img {
  transform: scale(1.045);
  filter: saturate(1.015) contrast(1.08) brightness(1.015);
}

.mb-cg__cover-meta {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 0;
  color: var(--mb-text);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  border: 1px solid var(--mb-glass-border);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--mb-glow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}

.mb-cg__card.is-active .mb-cg__cover-meta,
.mb-cg__card:hover .mb-cg__cover-meta,
.mb-cg__card:focus-visible .mb-cg__cover-meta {
  opacity: 1;
  transform: translateY(0);
}

.mb-cg__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.mb-cg__location {
  font-size: 12px;
  color: var(--mb-muted);
}

.mb-cg.is-frozen .mb-cg__row {
  transition: transform 180ms ease;
}

.mb-cg.is-frozen .mb-cg__card:not(.is-active) {
  opacity: 0.92;
}

.mb-cg-ghost {
  border-radius: var(--mb-radius);
  overflow: hidden;
  box-shadow: 0 24px 90px rgba(0,0,0,0.34);
  filter: saturate(1.02) contrast(1.01);
}

.mb-cg-field-ghost {
  position: fixed;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 18px 70px rgba(0,0,0,0.34);
  filter: saturate(0.98) contrast(1.01);
  pointer-events: none;
  z-index: 99998;
}

.mb-cg-debug [data-mb-cg-track],
.mb-cg-debug .mb-cg__card {
  outline: 1px dashed rgba(255,255,255,0.35);
}

@media (max-width: 767px) {
  .mb-cg__viewport {
    min-height: clamp(380px, 58vh, 640px);
    perspective: 1100px;
  }

  .mb-cg.is-hovering .mb-cg__card {
    filter: none;
    opacity: 1;
  }

  .mb-cg__cover-meta {
    padding: 8px 10px;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mb-cg__track,
  .mb-cg__row,
  .mb-cg__card,
  .mb-cg__img,
  .mb-cg__cover-meta {
    transition: none !important;
    animation: none !important;
  }
}