.theory-assets{background:#fff;scroll-margin-top:110px}.theory-heading{max-width:700px;margin-bottom:32px}.theory-heading h2{margin-bottom:18px}.theory-variants{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.theory-variants figure{margin:0}.theory-art{background:#f3f7f3;border-radius:18px;min-height:190px;display:grid;place-items:center;padding:24px}.theory-art.dark{background:#244140}.theory-art svg{width:135px;height:auto}.learning-folio-mark{display:block;width:100%;height:auto}.theory-variants figcaption{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13px;padding-top:13px}.theory-variants figcaption a{font-size:12px}.theory-sizes{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin:35px 0}.theory-sizes>span:first-child{font-size:12px;color:#526b64}.theory-sizes strong{font-size:15px}.theory-usage{display:grid;grid-template-columns:1fr 1fr;gap:55px;margin:36px 0}.theory-usage h3{font-size:20px;margin-bottom:12px}.theory-usage p{font-size:15px;color:#526b64;max-width:530px}.theory-example{max-width:780px;background:#f3f7f3;border-radius:18px;padding:30px;margin:30px 0}.theory-example-label{font-size:11px;color:#526b64;margin-bottom:24px}.theory-example-content{display:flex;align-items:center;gap:28px}.theory-example-content>svg{width:70px;flex-shrink:0}.theory-example-content p{font-size:13px;color:#526b64;margin:0 0 8px}.theory-example-content h3{font-size:25px;margin-bottom:10px}.theory-example-caption{font-size:11px;color:#526b64;display:block;margin-top:22px}@media(max-width:850px){.theory-variants{grid-template-columns:repeat(2,minmax(0,1fr))}.theory-usage{gap:30px}}@media(max-width:550px){.theory-assets .wrap{padding-left:20px;padding-right:20px}.theory-art{min-height:140px;padding:20px;border-radius:12px}.theory-art svg{width:92px}.theory-variants{gap:22px 14px}.theory-variants figcaption{font-size:11px;gap:9px;flex-wrap:wrap}.theory-usage{grid-template-columns:1fr;gap:28px}.theory-example{padding:24px}.theory-example-content{align-items:start;flex-direction:column;gap:22px}.theory-example-content>svg{width:52px}.theory-sizes{gap:24px}.theory-sizes>span:first-child{width:100%}.theory-assets .row{align-items:start;flex-direction:column}}@media(forced-colors:active){.learning-folio-mark path{fill:CanvasText}}