@layer reset,tokens,base,layout;@layer components{.block-practice{--section-space-start:0;--section-space-end:0;--card-w:clamp(15.625rem, 22vw, 21.25rem);--card-pad:clamp(1.125rem, 1.6vw, 1.625rem);background:var(--color-surface)}.block-practice__inner{min-block-size:100svh;color:var(--color-ink);flex-wrap:wrap;align-content:center;align-items:center;gap:clamp(1.75rem,3vw,3.5rem) 0;padding:clamp(3rem,8vh,6rem) 0 clamp(3rem,8vh,6rem) clamp(1.25rem,7.3913vw - .228261rem,5.5rem);display:flex}.block-practice__intro{z-index:2;flex-direction:column;flex:0 0 clamp(18.75rem,30vw,30rem);gap:clamp(1.25rem,3.5vh,2.25rem);max-inline-size:100%;padding-inline-end:clamp(1.25rem,3vw,3rem);display:flex;position:relative}.block-practice__title{font-family:var(--type-display-1-family);font-size:var(--type-display-1-size);font-weight:var(--type-display-1-weight);line-height:var(--type-display-1-leading);letter-spacing:var(--type-display-1-tracking);margin:0}.block-practice__text{font-family:var(--type-body-family);font-size:var(--type-body-size);font-weight:var(--type-body-weight);line-height:var(--type-body-leading);letter-spacing:var(--type-body-tracking);color:var(--color-muted);text-wrap:pretty;margin:0}.block-practice__rail-wrap{scroll-snap-type:x mandatory;scrollbar-width:none;flex:26.25rem;min-inline-size:0;position:relative;overflow-x:auto}.block-practice__rail-wrap::-webkit-scrollbar{display:none}.block-practice__rail{inline-size:max-content;margin:0;padding:0 clamp(1.25rem,7.3913vw - .228261rem,5.5rem) 0 0;list-style:none;display:flex}.block-practice__item{scroll-snap-align:start}.block-practice__card{inline-size:var(--card-w);block-size:min(70vh,36.25rem);padding:var(--card-pad);color:var(--color-ink);border-inline-start:1px solid #c9a45c38;flex-direction:column;justify-content:space-between;text-decoration:none;transition:background-color .5s;display:flex;position:relative}.block-practice__card .icon--arrow-long{opacity:.7;inline-size:1.625rem;transition:translate .4s,opacity .4s}.block-practice__card:focus-visible{background:#c9a45c0f}.block-practice__card:focus-visible .icon--arrow-long{opacity:1;translate:.375rem}@media (hover:hover) and (pointer:fine){.block-practice__card:hover{background:#c9a45c0f}.block-practice__card:hover .icon--arrow-long{opacity:1;translate:.375rem}}.block-practice__window{inset:4rem var(--card-pad) clamp(6rem, 13vh, 8rem);background:var(--color-card);position:absolute;overflow:hidden}.block-practice__window:after{content:"";background:linear-gradient(#0a0e1a59,#0a0e1ac7);transition:opacity .5s;position:absolute;inset:0}.block-practice__card:focus-visible .block-practice__window:after{opacity:.15}@media (hover:hover) and (pointer:fine){.block-practice__card:hover .block-practice__window:after{opacity:.15}.block-practice__card:hover .block-practice__img{filter:grayscale(0)}}.block-practice__img{object-fit:cover;filter:grayscale(.35);block-size:100%;inline-size:140%;max-inline-size:none;transition:filter .6s;position:absolute;inset-block:0;inset-inline-start:-20%}.block-practice__meta{font-family:var(--type-body-family);letter-spacing:.12em;justify-content:space-between;align-items:center;font-size:.8125rem;display:flex;position:relative}.block-practice__num{color:var(--color-primary)}.block-practice__name{font-family:var(--type-title-family);font-size:var(--type-title-size);font-weight:var(--type-title-weight);line-height:var(--type-title-leading);letter-spacing:var(--type-title-tracking);text-wrap:balance;font-size:clamp(1.375rem,1.9vw,1.875rem);line-height:1.12;position:relative}.block-practice__card--all{background:var(--color-ink);color:var(--color-on-primary);border:0;justify-content:flex-end;gap:.875rem}.block-practice__card--all .icon--arrow-long{opacity:1;inline-size:2.25rem}.block-practice__card--all:focus-visible{background:var(--color-primary)}@media (hover:hover) and (pointer:fine){.block-practice__card--all:hover{background:var(--color-primary)}}.block-practice__card--all .block-practice__name{font-size:clamp(1.5rem,2vw,2rem)}@media (hover:hover) and (pointer:fine){.block-practice__window{clip-path:inset(100% 0% 0% 0% round var(--radius-full) var(--radius-full) 0 0)}.block-practice__card:hover .block-practice__window,.block-practice__card:focus-visible .block-practice__window{clip-path:inset(0% 0% 0% 0% round var(--radius-full) var(--radius-full) 0 0)}.block-practice__img{translate:var(--cx,0) var(--cy,0);scale:1.1}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.block-practice__window{transition:clip-path .8s cubic-bezier(.2,.7,.2,1)}}@media (prefers-reduced-motion:no-preference) and (scripting:enabled) and (width>=56.25em) and (height>=37.5em){.block-practice__rail-wrap{scroll-snap-type:none;overflow-x:clip}}}@layer utilities;
