/* --------------------------------------------------------*/

/* @group @variables */

.m-help-detail-header {
--head-3-margin-bottom: 0;
--head-3-font-size: 1.125rem;
--head-3-line-height: 1.333333333;
--head-3-color: var(--color-brand);
--head-3-font-weight: 300;
}

/* @end @variables */

/* @group @m-help-detail */

.m-help-detail-primary {
position: relative;
background-color: var(--color-white);
}

/* @end @m-help-detail */

/* @group @m-help-list */

[class*="m-help-list-"] {
--help-detail-header-columns: auto 1fr;
--help-detail-header-gap: .75rem;
--help-detail-header-padding: .75rem 0;
--help-detail-contents-padding: 1.125rem 0;
--help-icon-size: 2.25rem;
--help-icon-radius: 50%);
--help-icon-background-color: var(--color-brand);
--help-icon-text-font-size: 1.25rem;
--help-icon-text-line-height: 1.2;
--help-icon-text-font-weight: 500;
--help-icon-text-color: var(--color-white);
--head-3-margin-top: .375rem;
}

/* @end @m-help-list */

/* @group @m-help-detail-header */

[class*="m-help-detail-header"] {
position: relative;
display: grid;
grid-template-columns: var(--help-detail-header-columns);
gap: var(--help-detail-header-gap);
padding: var(--help-detail-header-padding);
box-shadow: inset 0 -1px 0 var(--color-gainsboro);
}

[class*="m-help-detail-header"]:before {
content: 'Q';
display: grid;
justify-content: center;
align-items: center;
width: var(--help-icon-size);
height: var(--help-icon-size);
background-color: var(--help-icon-background-color);
border-radius: var(--help-icon-radius);
font-size: var(--help-icon-text-font-size);
line-height: var(--help-icon-text-line-height);
color: var(--help-icon-text-color);
font-weight: var(--help-icon-text-font-weight);
}

/* @end @m-help-detail-header */

/* @group @m-help-detail-contents */

[class*="m-help-detail-contents"] {
padding: var(--help-detail-contents-padding);
}

/* @end @m-help-detail-contents */