.mg-how-to-use--steps-compact .mg-how-to-use__list{gap:var(--space-md)}.mg-how-to-use--steps-compact .mg-how-to-use__step{grid-template-columns:6.5rem minmax(0,1fr);grid-template-areas:"media body";column-gap:var(--space-md);row-gap:0;align-items:center;padding-block-end:var(--space-md)}.mg-how-to-use--steps-compact .mg-how-to-use__step:last-child{padding-block-end:0}.mg-how-to-use--steps-compact .mg-how-to-use__step-media{grid-area:media;aspect-ratio:1}.mg-how-to-use--steps-compact .mg-how-to-use__step-number{grid-area:media;z-index:var(--z-local-1);display:grid;place-items:center;align-self:start;justify-self:start;inline-size:1.75rem;block-size:1.75rem;margin:var(--space-xs);border-radius:var(--radius-circle);background-color:var(--color-background);color:var(--color-headings);font-family:var(--font-body--family);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-normal);opacity:1}.mg-how-to-use--steps-compact .mg-how-to-use__step-number [data-auto-number]:before{content:counter(htu-step)}.mg-how-to-use--steps-compact .mg-how-to-use__step[data-media-type=none]{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"number body"}.mg-how-to-use--steps-compact .mg-how-to-use__step[data-media-type=none] .mg-how-to-use__step-number{grid-area:number;margin:0;background-color:color-mix(in srgb,var(--color-text) 8%,var(--color-background))}.mg-how-to-use--steps-compact .mg-how-to-use__step-body{grid-area:body;gap:var(--space-xs)}.mg-how-to-use--steps-compact .mg-how-to-use__step-title{padding-block-end:var(--space-xs);border-block-end:var(--border-thickness) solid color-mix(in srgb,var(--color-text) 25%,transparent);font-family:var(--font-body--family);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase}.mg-how-to-use--steps-compact .mg-how-to-use__step-description{font-size:var(--font-size-xs);line-height:var(--line-height-normal)}.mg-how-to-use--steps-compact .mg-how-to-use__step-cta{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}@media not (max-width:750px){.mg-how-to-use--steps-compact .mg-how-to-use__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:var(--space-lg)}.mg-how-to-use--steps-compact .mg-how-to-use__step{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "body";row-gap:var(--space-md);align-items:start;padding-block-end:0;border-block-end:0}.mg-how-to-use--steps-compact .mg-how-to-use__step-media{aspect-ratio:var(--htu-media-ratio, 4 / 3)}.mg-how-to-use--steps-compact .mg-how-to-use__step-number{inline-size:2rem;block-size:2rem;margin:var(--space-sm);font-size:var(--font-size-sm)}.mg-how-to-use--steps-compact .mg-how-to-use__step-title{font-size:var(--font-size-md);font-weight:var(--font-weight-medium)}.mg-how-to-use--steps-compact .mg-how-to-use__step-description{font-size:var(--font-size-sm)}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/mg-how-to-use-compact.css.map */