:root{
  --hms-gap: 6px;
  --hms-col-w: 292px;
}

.hms6-wrapper{
  position:relative;
  width:100vw;
  max-width:100%;
  margin-left:50%;
  transform:translateX(-50%);
}

.hms6-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding-right: calc(var(--hms-col-w) * 0.5);
}
.hms6-viewport::-webkit-scrollbar{display:none}

.hms6-track{
  display:flex;
  gap:var(--hms-gap);
}

.hms6-col{
  flex:0 0 var(--hms-col-w);
  display:flex;
  flex-direction:column;
  gap:var(--hms-gap);
}

/* Remove fixed heights – images scale naturally */
.hms6-col.pattern-a .hms6-item:nth-child(1),
.hms6-col.pattern-a .hms6-item:nth-child(2),
.hms6-col.pattern-b .hms6-item:nth-child(1),
.hms6-col.pattern-b .hms6-item:nth-child(2){
  height:auto;
}

.hms6-item{
  position:relative;
  width:100%;
  overflow:hidden;
}

.hms6-item img{
  width:100%;
  height:auto; /* keep aspect ratio */
  display:block;
  filter:grayscale(100%);
}

/* Overlay on hover */
.hms6-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.85);
  opacity:0;
  transition:opacity .25s;
}
.hms6-item:hover .hms6-overlay{opacity:1}

.hms6-text{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  text-align:left;
}
.hms6-text .t1{
  color:var(--hms-title-color);
  font-weight:700;
  font-size:var(--hms-title-size);
}
.hms6-text .t2{
  color:var(--hms-subtitle-color);
  font-weight:600;
  font-size:var(--hms-subtitle-size);
  margin:.25rem 0;
}
.hms6-text .t3{
  color:var(--hms-footer-color);
  font-weight:700;
  font-size:var(--hms-footer-size);
}

/* Bottom nav */
.hms6-nav{
  position:sticky;
  bottom:0;
  left:0;
  right:0;
  background:#232733;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0px 0px;
  margin-top:6px;
}
.hms6-nav .nav-arrow{
  background:transparent;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hms6-progress{
  position:relative;
  width:180px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hms6-progress .track{
  position:absolute;
  left:14%;
  right:14%;
  height:2px;
  background:#2f3341;
}
.hms6-progress .lines{
  position:relative;
  color:#d6d8df;
  font-weight:800;
  letter-spacing:2px;
  transform:translateX(0);
}

/* Mobile */
@media (max-width: 640px){
  :root{ --hms-col-w: 70vw; --hms-gap: 4px; }
  .hms6-progress{width:150px}
}