/* Crescospec Marquee Slider — CSS keyframes, truly infinite & linear */
.csmq{
  --csmq-item-w: 320px;  /* responsive via control */
  --csmq-gap: 16px;      /* responsive via control */
  --csmq-duration: 20s;  /* computed by JS = seqWidth / velocity */
}

/* Viewport hides overflow */
.csmq .csmq-viewport{
  width: 100%;
  overflow: hidden;
}

/* Track: two identical sequences side by side */
.csmq .csmq-track{
  display: flex;
  width: max-content;            /* shrink-to-fit content width */
  will-change: transform;
  animation: csmq-marquee var(--csmq-duration) linear infinite;
}

/* Direction control: rtl (default) moves left; ltr moves right */
.csmq[data-dir="ltr"] .csmq-track{
  animation-direction: reverse;
}

/* One sequence (duplicated) */
.csmq .csmq-seq{
  display: inline-flex;
  gap: var(--csmq-gap);
  margin-right: var(--csmq-gap); /* NEW: gap between #1 and #2 */
}

/* Item card has fixed width from control, so count per row is responsive */
.csmq .csmq-item{
  width: var(--csmq-item-w);
  min-height: 1px;
  box-sizing: border-box;
  border: 1px solid #EAECF0;
  box-shadow: 0 2px 8px rgba(20,30,40,.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Title + icon */
.csmq .csmq-item-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.csmq .csmq-item-ico{ display:inline-flex; line-height:0; color:#E53935; }

.csmq .csmq-item-title{ margin:0; font-weight:700; font-size:18px; color:#0f1a24; }
.csmq .csmq-item-text{ font-size:14px; color:#6b7a8a; line-height:1.45; }

/* Keyframes: translate by exactly half track width (since there are two sequences) */
@keyframes csmq-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}