:root{
  --jbc21-gold:#b99355;
  --jbc21-text:#17191c;
  --jbc21-muted:#7b8187;
  --jbc21-line:#ded9d1;
}

html, body {
  overflow-x: clip;
}

.jbc21-section{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:86px 0 46px;
  background:#fff;
  color:var(--jbc21-text);
  overflow:hidden;
}

.jbc21-head{
  width:min(calc(100% - 96px),1440px);
  margin:0 auto 28px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
}

.jbc21-kicker{
  color:var(--jbc21-gold);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
  margin-bottom:13px;
}

.jbc21-head h2{
  margin:0;
  color:var(--jbc21-text);
  font-family:Didot,"Bodoni 72",Georgia,serif;
  font-weight:400;
  font-size:clamp(46px,5vw,72px);
  line-height:.98;
  letter-spacing:-.04em;
}

.jbc21-arrows{display:flex;gap:8px}

.jbc21-arrow{
  width:46px;
  height:46px;
  border:1px solid var(--jbc21-line);
  background:#fff;
  color:var(--jbc21-text);
  font-size:21px;
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}

.jbc21-arrow:hover{
  border-color:var(--jbc21-gold);
  color:var(--jbc21-gold);
  transform:translateY(-1px);
}

.jbc21-stage{
  width:100%;
  perspective:1700px;
  overflow:hidden;
  padding:20px 0;
}

.jbc21-track{
  position:relative;
  width:100%;
  height:510px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-style:preserve-3d;
  touch-action:pan-y;
  user-select:none;
  cursor:grab;
}

.jbc21-track:active{cursor:grabbing}

.jbc21-card{
  position:absolute;
  left:50%;
  top:50%;
  width:min(31vw,470px);
  height:420px;
  margin-left:calc(min(31vw,470px) / -2);
  margin-top:0;
  padding:0;
  border:0;
  overflow:hidden;
  background:#ece9e3;
  color:#fff!important;
  text-decoration:none!important;
  cursor:pointer;
  transform-origin:center;
  box-shadow:0 26px 60px rgba(18,20,22,.10);
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
}

.jbc21-card.is-active{
  box-shadow:0 34px 82px rgba(18,20,22,.17);
}

.jbc21-media,
.jbc21-media img,
.jbc21-placeholder,
.jbc21-shade{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.jbc21-media img{
  object-fit:cover;
  object-position:center center;
  display:block;
  transform:scale(1.001);
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}

.jbc21-card.is-active:hover .jbc21-media img{
  transform:scale(1.018);
}

.jbc21-placeholder{
  background:
    radial-gradient(circle at 70% 30%,rgba(185,147,85,.18),transparent 30%),
    linear-gradient(145deg,#f0eee9,#ded9d1);
}

.jbc21-shade{
  background:linear-gradient(0deg,rgba(6,9,12,.72) 0%,rgba(6,9,12,.09) 57%,rgba(6,9,12,.01) 100%);
}

.jbc21-copy{
  position:absolute;
  inset:auto 0 0;
  z-index:2;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.jbc21-number{
  color:#d7b777;
  font-size:9px;
  letter-spacing:.14em;
  margin-bottom:9px;
}

.jbc21-title{
  font-family:Didot,"Bodoni 72",Georgia,serif;
  font-size:34px;
  line-height:1;
  letter-spacing:-.025em;
}

.jbc21-subtitle{
  margin-top:7px;
  color:rgba(255,255,255,.72);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:8px;
}

.jbc21-footer{
  width:min(calc(100% - 96px),1440px);
  margin:10px auto 0;
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
}

.jbc21-progress{
  height:1px;
  background:var(--jbc21-line);
  overflow:hidden;
}

.jbc21-progress span{
  display:block;
  height:100%;
  width:0;
  background:var(--jbc21-gold);
}

.jbc21-count{
  color:var(--jbc21-muted);
  font-family:Georgia,serif;
  font-size:12px;
  letter-spacing:.07em;
}

.jbc21-count strong{
  color:var(--jbc21-gold);
  font-weight:400;
}

@media(max-width:1000px){
  .jbc21-head,.jbc21-footer{width:calc(100% - 48px)}
  .jbc21-track{height:450px}
  .jbc21-card{
    width:min(54vw,440px);
    height:370px;
    margin-left:calc(min(54vw,440px) / -2);
    margin-top:0;
  }
}

@media(max-width:620px){
  .jbc21-section{padding:62px 0 36px}
  .jbc21-head{
    width:calc(100% - 28px);
    align-items:flex-start;
  }
  .jbc21-head h2{font-size:44px}
  .jbc21-arrows{display:none}
  .jbc21-track{height:390px}
  .jbc21-card{
    width:76vw;
    height:340px;
    margin-left:-38vw;
    margin-top:0;
  }
  .jbc21-footer{width:calc(100% - 28px)}
}