.popular-patches{--patches-bg:#f3f3ef;color:var(--color-primary,#121212);background-color:var(--patches-bg);background-image:radial-gradient(var(--accent,#cf0) 1.5px, transparent 1.5px);background-size:24px 24px;padding:4rem 1.5rem;scroll-margin-top:6rem}.popular-patches__inner{max-width:80rem;margin-inline:auto}.popular-patches__header{text-align:center;margin-bottom:3rem}.popular-patches__header h2{font-family:var(--font-display);text-transform:uppercase;text-wrap:balance;font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.15}.popular-patches__header p{color:#525252;max-width:45rem;margin:1.5rem auto 0}.popular-patches__viewport{scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:1.5rem;gap:1rem;display:flex;overflow-x:auto}.popular-patches__viewport::-webkit-scrollbar{display:none}.popular-patches__group{scroll-snap-align:start;flex:0 0 100%;gap:1rem;min-width:0;display:flex}.popular-patches__card{isolation:isolate;border-radius:1.5rem;flex:1 1 0;min-width:0;height:clamp(22rem,37vw,31.25rem);transition:flex-grow .7s cubic-bezier(.2,.7,.2,1);position:relative;overflow:hidden}.popular-patches__card:after{content:"";z-index:-1;background:linear-gradient(#0b0b0b08,#0b0b0b75 55%,#0b0b0b99);position:absolute;inset:0}.popular-patches__photos{z-index:-2;background:#e4e2dc;flex-direction:column;transition:transform 1s cubic-bezier(.2,.7,.2,1);display:flex;position:absolute;inset:0}.popular-patches__photo{object-fit:cover;flex:1;width:100%;height:50%;min-height:0}.popular-patches__photo:only-child{object-fit:cover;height:100%}.popular-patches__photos--collage .popular-patches__photo{object-fit:cover}.popular-patches__body{color:#fff;flex-direction:column;justify-content:center;padding:1.75rem;display:flex;position:absolute;inset:0}.popular-patches__number{width:2.5rem;height:2.5rem;font-family:var(--font-display);background:#0b0b0b73;border:1px solid #fff6;border-radius:50%;align-self:flex-start;place-items:center;margin-bottom:1rem;font-weight:700;display:grid}.popular-patches__body h3{font-family:var(--font-display);text-transform:uppercase;overflow-wrap:normal;font-size:clamp(1.125rem,1.8vw,1.625rem);font-weight:700;line-height:1.15}.popular-patches__reveal{opacity:0;grid-template-rows:0fr;transition:grid-template-rows .5s,opacity .5s;display:grid}.popular-patches__reveal>div{overflow:hidden}.popular-patches__reveal p{color:#e5e7eb;max-width:36ch;margin-top:1rem;font-size:.9375rem;line-height:1.5}.popular-patches__link{font-family:var(--font-display);text-transform:uppercase;color:var(--accent);align-items:center;gap:.5rem;margin-top:1rem;font-size:.75rem;display:inline-flex}.popular-patches svg{flex-shrink:0;width:1.25rem;height:1.25rem}.popular-patches__card:is(:hover,:focus-visible){flex-grow:2.5}.popular-patches__card:is(:hover,:focus-visible) .popular-patches__photos{transform:scale(1.1)}.popular-patches__card:is(:hover,:focus-visible) .popular-patches__reveal{opacity:1;grid-template-rows:1fr}.popular-patches :focus-visible{outline-offset:-4px;outline:2px solid #121212}.popular-patches__card:focus-visible{outline-color:var(--accent)}.popular-patches__controls{justify-content:center;align-items:center;gap:1rem;margin-top:2rem;display:flex}.popular-patches__controls[hidden]{display:none}.popular-patches__controls button{color:#121212;background:var(--patches-bg);cursor:pointer;border:1px solid #72726c;border-radius:50%;justify-content:center;align-items:center;min-width:44px;min-height:44px;transition:color .15s,background-color .15s;display:inline-flex}.popular-patches__controls button:hover{background:var(--accent);color:#121212}.popular-patches__position{text-align:center;min-width:4rem;font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:.8125rem}.popular-patches__controls .popular-patches__pause{border-radius:999px;padding:.5rem 1rem;font-size:.8125rem}@media (width<=1023px){.popular-patches__group{display:contents}.popular-patches__card{scroll-snap-align:start;flex:0 0 calc(50% - .5rem)}.popular-patches__body{justify-content:flex-end;padding:1.5rem}.popular-patches__reveal{opacity:1;grid-template-rows:1fr}.popular-patches__body h3{font-size:1.5rem}}@media (width<=767px){.popular-patches{padding-block:3.5rem}.popular-patches__header{margin-bottom:2rem}.popular-patches__card{flex-basis:88%;height:26rem}.popular-patches__body{padding:1.25rem}.popular-patches__controls{flex-wrap:wrap;gap:.75rem}}@media (prefers-reduced-motion:reduce){.popular-patches__card,.popular-patches__photos,.popular-patches__reveal{transition:none}.popular-patches__card:is(:hover,:focus-visible) .popular-patches__photos{transform:none}}