.how-to{container-type:inline-size;background:var(--color-bg)}.how-to__inner{max-inline-size:var(--section-max, var(--page-width));margin-inline:auto;padding-inline:var(--section-pad, var(--page-margin));padding-block-start:var(--section-pt);padding-block-end:var(--section-pb)}.how-to__head{margin-block-end:var(--space-lg)}.how-to__row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ht-gap, 48px)}@container (max-width: 749px){.how-to__row{grid-template-columns:1fr;gap:var(--ht-gap-mobile, 32px)}.how-to__row--timeline{position:relative;counter-reset:ht-step}.how-to__row--timeline:before{content:"";position:absolute;inset-block:0;inset-inline-start:var(--ht-media-w, 50%);inline-size:1px;background:var(--color-line)}.how-to__row--timeline>.step{display:flow-root;position:relative;counter-increment:ht-step}.how-to__row--timeline>.step>.image{float:inline-start;inline-size:calc(var(--ht-media-w, 50%) - var(--ht-gap-mobile, 32px) / 2);margin-inline-end:var(--ht-gap-mobile, 32px)}.how-to__row--timeline>.step>:not(.image){margin-inline-start:calc(var(--ht-media-w, 50%) + var(--ht-gap-mobile, 32px) / 2)}.how-to__row--timeline>.step:nth-child(2n)>.image{float:inline-end;margin-inline:var(--ht-gap-mobile, 32px) 0}.how-to__row--timeline>.step:nth-child(2n)>:not(.image){margin-inline:0 calc(var(--ht-media-w, 50%) + var(--ht-gap-mobile, 32px) / 2)}.how-to__row--timeline>.step:not(:has(>:not(.image)~:not(.image))){display:grid;grid-template-columns:calc(var(--ht-media-w, 50%) - var(--ht-gap-mobile, 32px) / 2) 1fr;column-gap:var(--ht-gap-mobile, 32px);align-items:var(--ht-align, start)}.how-to__row--timeline>.step:not(:has(>:not(.image)~:not(.image)))>.image{float:none;inline-size:auto;margin-inline:0;grid-column:1;grid-row:1}.how-to__row--timeline>.step:not(:has(>:not(.image)~:not(.image)))>:not(.image){margin-inline:0;grid-column:2;grid-row:1}.how-to__row--timeline>.step:nth-child(2n):not(:has(>:not(.image)~:not(.image))){grid-template-columns:1fr calc(var(--ht-media-w, 50%) - var(--ht-gap-mobile, 32px) / 2)}.how-to__row--timeline>.step:nth-child(2n):not(:has(>:not(.image)~:not(.image)))>.image{grid-column:2;grid-row:1}.how-to__row--timeline>.step:nth-child(2n):not(:has(>:not(.image)~:not(.image)))>:not(.image){grid-column:1;grid-row:1}.how-to__row--timeline>.step>:not(.image)~:not(.image){margin-block-start:var(--gap, 8px)}.how-to__row--timeline>.step:before{content:counter(ht-step);position:absolute;inset-inline-start:var(--ht-media-w, 50%);inset-block-start:50%;translate:-50% -50%;display:grid;place-items:center;inline-size:1.75rem;block-size:1.75rem;border:1px solid var(--color-line);border-radius:50%;background:var(--color-bg);font-family:var(--font-body);font-size:var(--text-xs);color:var(--color-ink-soft)}.how-to__row--marker-dot>.step:before{content:"";inline-size:.625rem;block-size:.625rem;border-color:var(--color-accent);background:var(--color-accent)}.how-to__row--marker-none>.step:before{display:none}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/how-to.css.map */