.fi-wrap{ position: relative; width: 100%; }

/* track */
.fi-track{
  display: flex;
  align-items: stretch; /* equal height */
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 44px;
  -webkit-overflow-scrolling: touch;
}
.fi-track:focus{ outline: none; }

/* slide */
.fi-item{
  scroll-snap-align: start;
  flex: 0 0 calc(100% / var(--fi-slides-mobile, 1));
  box-sizing: border-box;
  display: flex; /* allow child to stretch */
}
@media (min-width: 768px){
  .fi-item{ flex-basis: calc(100% / var(--fi-slides-tablet, 2)); }
}
@media (min-width: 1024px){
  .fi-item{ flex-basis: calc(100% / var(--fi-slides-desktop, 3)); }
}

/* card equal height */
.fi-card{
  width: 100%;
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  overflow: hidden;
}

.fi-thumb{
  display:block;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px; /* more spacing */
  text-decoration:none;
}
.fi-thumb img{ width:100%; height:auto; display:block; }
.fi-thumb-empty{
  padding: 28px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  text-align:center;
  font-size:14px;
}

/* smaller title + clamp so height consistent */
.fi-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  text-decoration:none;
  margin: 0 0 8px; /* reduce top, add gap to desc */
}

.fi-desc{
  font-size:14px;
  line-height:1.55;
  opacity:.85;
  margin-bottom: 10px;
}

/* keep readmore at bottom to align cards */
.fi-readmore{
  margin-top: auto;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
}

/* arrows: default #193540, hover #aea593 */
.fi-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #193540;
  background: #193540;
  color: #ffffff;
  cursor:pointer;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.fi-arrow:hover,
.fi-arrow:focus{
  background: #aea593;
  border-color: #aea593;
  color: #ffffff;
}
.fi-arrow:active{ transform: translateY(-50%) scale(0.98); }

.fi-prev{ left: 4px; }
.fi-next{ right: 4px; }