.dra-ana-roles{position:relative;overflow:clip;padding:clamp(5rem,9vw,8rem) clamp(1.25rem,5vw,4.5rem) clamp(4rem,7vw,7rem);background:var(--dra-warm)}.dra-ana-roles .dra-ana-roles-inner{width:min(104rem,100%);margin-inline:auto;display:grid;grid-template-columns:minmax(22rem,.7fr) minmax(0,1.3fr);grid-template-rows:max-content minmax(0,1fr);grid-template-areas:"portrait heading" "portrait board";gap:clamp(2rem,4vw,4rem) clamp(3rem,6vw,7rem);align-items:start}.dra-ana-roles-inner>*{min-width:0}.dra-ana-roles-heading{grid-area:heading}.dra-ana-roles-heading h2{max-width:16ch;margin:0;font-size:clamp(3rem,5vw,5rem);line-height:.94;letter-spacing:-.055em;text-wrap:balance}.dra-ana-roles-heading h2 span{display:block}.dra-ana-roles-portrait{grid-area:portrait;position:sticky;top:clamp(1.5rem,4vw,4rem);height:auto;min-height:0;aspect-ratio:4 / 5.1;margin:0;overflow:hidden;border-radius:clamp(2.5rem,5vw,4.5rem) clamp(2.5rem,5vw,4.5rem) 1.75rem 1.75rem;background:var(--dra-cream)}.dra-ana-role-image{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .24s cubic-bezier(.23,1,.32,1)}.dra-ana-role-image.is-active{opacity:1}.dra-ana-role-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:56% center}.dra-ana-role-board{grid-area:board}.dra-ana-role-card{position:relative;margin:0;padding:clamp(3.5rem,8vw,7rem) 0;border-bottom:0;color:var(--dra-chocolate)}.dra-ana-role-card:first-child{padding-top:clamp(1rem,2vw,2rem)}.dra-ana-roles .dra-ana-role-card h3{max-width:15ch;margin:0 0 1rem;font-size:clamp(2.35rem,3.6vw,3.75rem);font-weight:600;line-height:.98;letter-spacing:-.05em;text-wrap:balance;transition:opacity .24s cubic-bezier(.23,1,.32,1),transform .24s cubic-bezier(.23,1,.32,1)}.dra-ana-role-panel{max-width:48rem;transition:opacity .24s cubic-bezier(.23,1,.32,1),transform .24s cubic-bezier(.23,1,.32,1)}.dra-ana-role-panel p{margin:0;color:var(--dra-muted);font-size:clamp(1.2rem,1.6vw,1.42rem);line-height:1.72;text-wrap:pretty}.dra-ana-role-panel .dra-ana-btn{width:fit-content;margin-top:2rem}@media(min-width:48.0625rem){.dra-ana-role-card:not(.is-active) h3,.dra-ana-role-card:not(.is-active) .dra-ana-role-panel{opacity:.42}.dra-ana-role-card:not(.is-active) h3{transform:translateY(.25rem)}.dra-ana-role-card:not(.is-active) .dra-ana-role-panel{transform:translateY(.5rem)}.dra-ana-role-card.is-active:before{content:"";position:absolute;top:clamp(3.5rem,8vw,7rem);bottom:2rem;left:clamp(-1.5rem,-2vw,-.75rem);width:2px;border-radius:99px;background:var(--dra-teal)}.dra-ana-role-card:first-child.is-active:before{top:clamp(1rem,2vw,2rem)}}@media(max-width:68rem)and (min-width:48.0625rem){.dra-ana-roles .dra-ana-roles-inner{grid-template-columns:minmax(18rem,.75fr) minmax(0,1.25fr);gap:2.5rem}}@media(max-width:48rem){.dra-ana-roles{padding-inline:1.125rem}.dra-ana-roles .dra-ana-roles-inner{grid-template-columns:1fr;grid-template-areas:"heading" "portrait" "board";row-gap:2.25rem}.dra-ana-roles-heading h2{max-width:11ch;font-size:clamp(2.75rem,12vw,4.5rem)}.dra-ana-roles-portrait{position:relative;top:auto;width:min(100%,32rem);height:auto;aspect-ratio:4 / 5.1;justify-self:center}.dra-ana-role-card{padding:2.5rem 0}.dra-ana-role-card:first-child{padding-top:0}.dra-ana-roles .dra-ana-role-card h3{margin-bottom:1rem;font-size:clamp(2rem,9vw,2.75rem)}}@media(prefers-reduced-motion:reduce){.dra-ana-role-image,.dra-ana-role-card h3,.dra-ana-role-panel{transition:none;transform:none}}
/*# sourceMappingURL=/cdn/shop/t/45/assets/dra-ana-roles.css.map */