.barkbox-how-it-works{background:rgb(var(--plain-white));padding:var(--spacing-xl) 0}.barkbox-how-it-works .content-container{max-width:var(--container-max-width);margin-left:auto;margin-right:auto;padding-left:var(--container-gutter);padding-right:var(--container-gutter)}.barkbox-how-it-works__grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr}.barkbox-how-it-works__header{grid-column:2/4;margin-bottom:var(--spacing-2xl)}.barkbox-how-it-works__eyebrow{background:var(--eyebrow-badge-bg-color, rgb(var(--bark-light-blue)));border-radius:var(--spacing-xxs);padding:var(--spacing-xxs) var(--spacing-xs);display:inline-block;margin-bottom:var(--spacing-sm)}.barkbox-how-it-works__steps{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--spacing-2xl)}.barkbox-step{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;align-items:center;gap:var(--spacing-md)}.barkbox-step--reverse .barkbox-step__content{grid-column:3;order:2}.barkbox-step--reverse .barkbox-step__image-wrapper{grid-column:2;order:1}.barkbox-step__content{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid rgb(var(--bark-light-blue));border-radius:20px;padding:var(--spacing-lg);background:rgb(var(--plain-white))}.barkbox-step__image-wrapper{grid-column:3;display:flex;justify-content:center}.barkbox-step__number{width:34px;height:34px;background:var(--step-number-bg-color, rgb(var(--bark-blue)));color:var(--step-number-text-color, rgb(var(--plain-white)));border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-md);font-size:20px;font-weight:700;line-height:34px;text-align:center;padding-top:3px}.barkbox-step__image{width:auto;height:100%;max-height:300px}@media (max-width: 768px){.barkbox-how-it-works__grid{grid-template-columns:1fr}.barkbox-how-it-works__header{grid-column:1;text-align:center;margin-bottom:var(--spacing-xl)}.barkbox-how-it-works__steps{grid-column:1}.barkbox-step{grid-template-columns:1fr 1fr;gap:var(--spacing-md);align-items:center}.barkbox-step--reverse{direction:ltr}.barkbox-step--reverse .barkbox-step__content{grid-column:2;order:2}.barkbox-step--reverse .barkbox-step__image-wrapper{grid-column:1;order:1}.barkbox-step__content{grid-column:1;border:none;background:transparent;padding:var(--spacing-md);text-align:left;align-items:flex-start}.barkbox-step__image-wrapper{grid-column:2;justify-content:center}.barkbox-step__image{width:auto;height:100%;max-height:300px}}
/*# sourceMappingURL=/cdn/shop/t/151/assets/barkbox-how-it-works-section.css.map */