.accordion{border-radius:var(--radius-2);box-shadow:var(--shadow-2);margin-block-end:var(--size-5);margin-block-start:var(--size-2);transition:.3s}.accordion.container{padding-inline:0}.accordion:hover{box-shadow:var(--shadow-3)}.bg-sand-300 .accordion,.bg-teal-700 .accordion{border-radius:0;box-shadow:none}.accordion__header{align-items:center;background-color:var(--grey-100);border-block-end:var(--size-px) solid transparent;display:flex;inline-size:100%;justify-content:space-between;padding-block:var(--size-4);padding-inline:var(--size-5);text-align:start}@media (width >= 640px){.accordion__header{padding-inline:var(--size-8)}}.bg-sand-300 .accordion__header{background-color:var(--blue-700)}.accordion__header span{color:var(--grey-900);font-size:var(--font-size-4)}.bg-sand-300 .accordion__header span{color:var(--white)}.accordion__icon{block-size:1em;display:inline-block;flex-shrink:0;inline-size:1em;max-inline-size:initial}.accordion__icon .icon__group{stroke-width:2px;transform-origin:50% 50%;transition:transform .3s cubic-bezier(.215,.61,.355,1);will-change:transform}.bg-sand-300 .accordion__icon .icon__group{stroke:var(--white)!important}.bg-teal-700 .accordion__icon .icon__group{stroke:var(--grey-900)!important}.accordion__icon .icon__group>*{stroke-dasharray:20;transform:translateY(4px);transform-origin:50% 50%;transition:transform .3s,stroke-dashoffset .3s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.accordion__icon .icon__group>*:first-child{stroke-dashoffset:10.15}.accordion__icon .icon__group>*:last-child{stroke-dashoffset:10.15}.accordion__panel{background-color:var(--white);display:none;padding-block:var(--size-5);padding-inline:var(--size-5);transform:translateZ(0);will-change:height}.bg-teal-700 .accordion__panel{color:var(--grey-900)}@media (width >= 640px){.accordion__panel{padding-block:var(--size-10);padding-inline:var(--size-10)}}.accordion--open>.accordion__header>.accordion__icon .icon__group{transform:rotate(-90deg)}.accordion--open>.accordion__header>.accordion__icon .icon__group>*:first-child,.accordion--open>.accordion__header>.accordion__icon .icon__group *:last-child{stroke-dashoffset:0;transform:translateY(0)}.accordion--open>.accordion__panel{display:block}.accordion--open .accordion__panel>*{animation:accordion-animation .4s cubic-bezier(.215,.61,.355,1)}@keyframes accordion-animation{0%{opacity:0%;transform:translateY(-10px)}to{opacity:100%;transform:translateY(0)}}