.kf-lineup{
  max-width:1100px;
  margin:48px auto 64px;
  padding:0 24px;
}
.kf-lineup__title{
  font-family:var(--kf-font-display);
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-size:clamp(2.5rem, 6vw, 4rem);
  margin-bottom:20px;
}
.kf-lineup__viewport{
  position:relative;
  overflow:hidden;
  padding-bottom:8px;
}
.kf-lineup__scroll{
  display:flex;
  gap:16px;
  will-change:transform;
}
.kf-lineup__item{
  flex:0 0 140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-decoration:none;
  color:var(--kf-black);
}
.kf-lineup__image{
  width:140px;
  height:175px;
  background-size:cover;
  background-position:center;
  border-radius:4px;
  margin-bottom:8px;
}
.kf-lineup__name{
  font-family:var(--kf-font-label);
  font-size:0.8rem;
  line-height:1.2;
}
.kf-lineup__item:hover .kf-lineup__name{
  color:var(--kf-red);
}

.kf-lineup__arrow{
  position:absolute;
  top:0;
  bottom:0;
  z-index:5;
  width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(to right, var(--kf-paper) 40%, transparent);
  border:none;
  color:var(--kf-black);
  cursor:pointer;
  padding:0;
}
.kf-lineup__arrow svg{
  width:22px;
  height:22px;
}
.kf-lineup__arrow--prev{
  left:0;
}
.kf-lineup__arrow--next{
  right:0;
  background:linear-gradient(to left, var(--kf-paper) 40%, transparent);
}
.kf-lineup__arrow:hover{
  color:var(--kf-red);
}