/* @group @variables */

[class*="m-flow-list"] {
--flow-columns: repeat(1, 1fr);
--flow-gap: .75rem;
--flow-contents-grid-columns: 1;
--flow-contents-grid-row: 1;
--flow-media-grid-columns: 1;
--flow-media-grid-row: 2;
--flow-media-margin-bottom: .375rem;
--flow-detail-padding: .75rem;
--flow-detail-background-color: var(--color-white);
--flow-detail-background-mask-color: var(--color-white);
--flow-detail-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%%3Cpath fill='hsl(220, 5%25, 20%25)' fill-rule='nonzero' d='M.122 7.04l11.502 13.287c.19.219.566.219.756 0L23.878 7.04a.504.504 0 0 0-.052-.707L21.244 4.12A.498.498 0 0 0 20.92 4l-.04.002a.5.5 0 0 0-.342.175l-8.535 10.051-8.54-10.051a.495.495 0 0 0-.34-.175.511.511 0 0 0-.366.118L.174 6.333a.498.498 0 0 0-.052.707z'/%3E%3C/svg%3E");
--flow-padding: 3rem;
--flow-media-max-size: 4.5rem;
--flow-media-push: auto;
--flow-detail-gap: .75rem;
--heading-3-word-break: keep-all;
--heading-3-font-size: 1.25rem;
--heading-3-line-height: 1.5;
--heading-3-font-weight: var(--text-font-weight-bold);
--heading-3-text-align: center;
--text-block-margin-bottom: 0;
--text-block-font-size: .8125rem;
--text-paragraph-line-height: 1.84615385;

--btn-grid-template-columns: var(--btn-before-after-size) 1fr var(--btn-before-after-size);
--btn-offer-gap: .375rem;
--btn-text-column: 2;
--btn-text-row: 1;
--btn-before-column: 1;
--btn-before-row: 1;
--btn-before-content: '';
--btn-before-after-size: 1.125rem;
--btn-before-background-color: currentColor;
}

@media all and (max-width: 47.9375em) {

[class*="m-flow-list"] {
--flow-max-size: 30rem;
--flow-push: auto;
}

}

@media all and (min-width: 48em) {

[class*="m-flow-list"] {
--flow-columns: repeat(4, 1fr);
--flow-gap: 2px;
}

}

/* @end @variables */

/* @group @m-flow-list */

[class*="m-flow-list"] {
display: grid;
grid-template-columns: var(--flow-columns);
grid-template-rows: var(--flow-rows);
gap: var(--flow-gap);
width: 100%;
max-width: var(--flow-max-size);
margin-right: var(--flow-push);
margin-bottom: 0;
margin-left: var(--flow-push);
counter-reset: li-entry;
}

/* @end @m-flow-list */

/* @group @m-flow-list */

[class*="a-flow-detail"] {
position: relative;
display: grid;
align-content: start;
grid-template-columns: repeat(1, 1fr);
gap: var(--flow-detail-gap);
padding: var(--flow-detail-padding);
background-color: var(--flow-detail-background-color);
border-radius: var(--flow-detail-border-radius);
counter-increment: li-entry;
}

[class*="a-flow-detail"]:before {
grid-row: 1;
}

[class*="a-flow-media"] {
grid-row: 2;
}

[class*="a-flow-title"] {
grid-row: 3;
}

[class*="a-flow-contents"] {
grid-row: 4;
}

[class*="a-flow-footer"] {
grid-row: 5;
}

/* @end @m-flow-list */

/* @group @a-flow-footer */

[class*="a-flow-footer"] {
margin-top: .375rem;
}

/* @end @a-flow-footer */

/* @group @a-flow-contents */

/*[class*="a-flow-contents"] p {
word-break: keep-all;
}*/

/* @end @a-flow-contents */

/* @group @a-flow-detail */

[class*="a-flow-detail"]:before {
content: "Step " counter(li-entry);
display: grid;
justify-content: center;
align-items: center;
padding-bottom: .75rem;
box-shadow: inset 0 -1px 0 0 var(--color-brand);
font-family: var(--font-family-brand-en);
font-size: 1.25rem;
line-height: 1.2;
color: var(--color-brand);
font-weight: var(--text-font-weight-bold);
text-align: center;
text-transform: uppercase;
}

/* @end @a-flow-detail */

/* @group @a-flow-media */

[class*="a-flow-media"] {
position: relative;
width: 100%;
max-width: var(--flow-media-max-size);
margin-right: var(--flow-media-push);
margin-left: var(--flow-media-push);
margin-bottom: var(--flow-media-margin-bottom);
}

/* @end @a-flow-media */