/* @group @variables */

[class*="m-faq-label"] {
--heading-3-margin-bottom: 0;
--heading-3-font-size: 1.25rem;
--heading-3-color: var(--color-brand);
}

[class*="m-faq-answer"] {
--heading-4-margin-bottom: 0;
--heading-4-font-size: 1rem;
--heading-4-line-height: 1.5;
--heading-4-font-weight: var(--text-font-weight-bold);
--text-block-margin-bottom: 0;
}

/* @end @variables */

/* @group @m-faq-list */

[class*="m-faq-list"]>section:not(:last-of-type) {
margin-bottom: 1.5rem;
padding-bottom: calc(1.5rem - 1px);
border-bottom: 1px solid var(--color-gainsboro);
}

/* @end @m-faq-list */

/* @group @m-faq-detail */

[class*="m-faq-detail"] {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem;
}

/* @end @m-faq-detail */

/* @group @m-faq-detail */

[class*="m-faq-label"],
[class*="m-faq-answer"] {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: .375rem 1fr;
align-items: start;
grid-column-gap: .75rem;
}

[class*="m-faq-label"]:before,
[class*="m-faq-answer"]:before {
grid-column: 1;
grid-row: 1 / 3;
display: flex;
justify-content: center;
align-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
color: var(--color-white);
}

[class*="m-faq-label"]:before {
content: 'Q';
background-color: var(--color-brand);
}

[class*="m-faq-answer"]:before {
content: 'A';
background-color: var(--color-dimgray);
}

[class*="m-faq-label"]>h3,
[class*="m-faq-label"]>h4,
[class*="m-faq-answer"]>div {
grid-column: 2;
grid-row: 2;
}


[class*="m-faq-answer"] p {
color: var(--color-text-secondary);
}

/* @end @m-faq-detail */