/* Craft beer label design page */
.cbl-hero{overflow:hidden;overflow:clip;padding-bottom:0}
.cbl-hero .lead{max-width:44ch}
.cbl-hero__cans{--p:0;display:flex;justify-content:center;align-items:flex-end;gap:0;margin:clamp(20px,2.5vw,40px) auto 0;padding:clamp(20px,3vw,40px) 2vw 0;max-width:1500px;height:clamp(230px,36vw,520px);clip-path:inset(-200vh -100vw 0 -100vw)}
.cbl-hero__can{--d:calc(var(--i) - 3);--ad:max(var(--d), calc(var(--d) * -1));flex:0 0 auto;width:clamp(76px,13.2vw,205px);margin-inline:clamp(-14px,-1.1vw,-6px);
  z-index:calc(10 - var(--ad));transform-origin:50% 100%;
  transform:translateY(calc(var(--base,8%) + var(--ad) * var(--ad) * 2.2% + var(--p) * var(--ad) * -3.5%)) rotate(calc(var(--d) * 3.2deg)) scale(calc(1 - var(--ad) * .045))}
.cbl-hero__can img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 26px rgba(26,23,20,.3));opacity:0;transform:translateY(46%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .7s ease;transition-delay:calc(var(--ad) * 90ms + 150ms)}
.cbl-hero__cans.is-in img{opacity:1;transform:none}
.cbl-hero .cs-meta{margin-top:0;padding-bottom:clamp(56px,7vw,96px)}

@media (min-width:1100px){
  .cbl-hero__top{position:relative;padding-bottom:clamp(40px,5vw,80px)}
  .cbl-hero__top .wrap>h1,.cbl-hero__top .wrap>.lead{max-width:min(16ch,40vw)}
  .cbl-hero__top .wrap>.lead{max-width:min(40ch,33vw)}
  .cbl-hero__cans{position:absolute;right:1vw;top:0;bottom:0;margin:0;padding:0;width:54vw;max-width:none;height:auto}
  .cbl-hero__can{--base:1%}
  .cbl-hero__can{width:clamp(110px,10vw,210px);margin-inline:-1.4vw}
}
.cbl-wall{padding-block:clamp(56px,7vw,110px) clamp(72px,9vw,130px);overflow:hidden}
.cbl-rows{display:grid;gap:clamp(22px,3vw,44px);margin-top:clamp(40px,5vw,72px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cbl-rows::-webkit-scrollbar{display:none}
.cbl-rows.is-drift{overflow:hidden}
.cbl-row{display:flex;gap:clamp(18px,2.6vw,44px);list-style:none;margin:0;padding:0 4vw;width:max-content;will-change:transform}
.cbl-row li{flex:0 0 auto;width:clamp(104px,13vw,178px)}
.cbl-row figure{margin:0}
.cbl-row img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 20px rgba(0,0,0,.55));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cbl-row li:hover img{transform:translateY(-10px) rotate(-2deg)}
.cbl-row figcaption{margin-top:.9rem;font-size:.6875rem;line-height:1.35;color:var(--faint);text-align:center}
.cbl-row figcaption b{display:block;font-weight:500;color:var(--ink);font-size:.75rem}
.cbl-note{margin:clamp(40px,5vw,64px) 0 0;color:var(--muted);font-size:var(--fs-sm)}
.cbl-note .link{margin-left:.6em}

.cbl-formats{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(40px,5vw,72px)}
.cbl-f{margin:0;border-radius:6px;background:var(--paper-2);padding:clamp(14px,2vw,28px);display:grid;gap:1rem;align-content:space-between}
.cbl-f img,.cbl-f video{display:block;width:100%;height:auto;border-radius:3px}
.cbl-f figcaption{font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cbl-f figcaption b{font-weight:500;color:var(--accent);margin-right:.5em}
.cbl-f--art,.cbl-f--label{grid-column:1/-1}
.cbl-f--can{grid-column:1/-1}
.cbl-f--can img{width:auto;max-height:min(70vh,560px);margin-inline:auto;filter:drop-shadow(0 22px 26px rgba(26,23,20,.3))}
.cbl-f--badge img{border-radius:0}
@media (min-width:900px){
  .cbl-formats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cbl-f--art{grid-column:1/4;grid-row:1}
  .cbl-f--label{grid-column:1/4;grid-row:2}
  .cbl-f--can{grid-column:4;grid-row:1/3;grid-template-rows:1fr auto}
  .cbl-f--can img{max-height:none;width:100%;height:auto;align-self:center}
  .cbl-f--badge{grid-column:1/3;grid-row:3}
  .cbl-f--social{grid-column:3/5;grid-row:3}
  .cbl-f--badge img,.cbl-f--social video{max-width:440px;margin-inline:auto}
}
.cbl-quote{max-width:46rem;margin-inline:auto}
@media (prefers-reduced-motion:reduce){.cbl-hero__can img{opacity:1;transform:none;transition:none}.cbl-row img{transition:none}}
