/* ── m3 10 Ask yourself — maarch-3/sections/10-ask-yourself/brief.md ──
   Figma 1:1382 h2 600/80 · 1:1383 sub 42/1 · 1:1384 list 26 / lh 2.56, odd #000, even #777 ·
   1:1470 question icon 199×208 @ (1684, +59) opacity .1 */

.m3-ask {
    background: var(--skin-canvas);
    padding: calc(80.5 * var(--u)) 0 calc(34 * var(--u));
}
.m3-ask__icon {
    position: absolute;
    left: calc(1542 / 1656 * 100%);
    top: calc(-21.5 * var(--u));
    width: calc(199 * var(--u));   /* Figma's 10% layer opacity is already baked into the exported PNG */
}
.m3-ask__title { font-size: var(--fs-display); font-weight: 600; line-height: 1; }
.m3-ask__sub { margin-top: calc(23 * var(--u)); font-size: var(--fs-sub); line-height: 1; }
.m3-ask__list {
    margin: calc(61 * var(--u)) 0 0 calc(3 * var(--u));
    padding: 0;
    max-width: calc(1481 * var(--u));
    list-style: none;
    counter-reset: q;
}
.m3-ask__list li {
    counter-increment: q;
    font-size: var(--fs-body);
    line-height: 2.56;
}
.m3-ask__list li::before { content: counter(q) ".\00a0\00a0"; }
.m3-ask__list li:nth-child(even) { color: #777; }

@media (max-width: 991.98px) {
    .m3-ask { padding: 64px 0 48px; }
    .m3-ask__icon { width: 96px; top: 0; left: auto; right: 0; }
    .m3-ask__title { font-size: 44px; }
    .m3-ask__sub { font-size: 22px; line-height: 1.25; }
    .m3-ask__sub br { display: none; }
    .m3-ask__list { margin: 32px 0 0; }
    .m3-ask__list li { font-size: 17px; line-height: 1.5; }
    .m3-ask__list li + li { margin-top: 16px; }
}
@media (max-width: 575.98px) {
    .m3-ask__icon { width: 56px; top: -40px; }
}