@layer bricks {.brxe-shortcode{width:100%}}@layer bricks {.brxe-text-link{gap:5px}.brxe-text-link,.brxe-text-link span{align-items:center;display:inline-flex}.brxe-text-link span{justify-content:center}.brxe-text-link .icon{flex-shrink:0}}@layer bricks {@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes scrolling{0%{opacity:1}to{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}a.brxe-image{display:inline-block}figure.brxe-image{margin:0}:where(.brxe-image).tag{display:inline-block;height:fit-content;position:relative;width:auto}:where(.brxe-image).caption{position:relative}:where(.brxe-image).caption:has(figcaption.bricks-image-caption){overflow:hidden}:where(.brxe-image).overlay{position:relative}:where(.brxe-image).overlay:before{bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}:where(.brxe-image):before{border-radius:inherit}:where(.brxe-image) a{border-radius:inherit;position:static;transition:inherit}:where(.brxe-image) picture{border-radius:inherit;transition:inherit}:where(.brxe-image) img{border-radius:inherit;height:100%;position:static!important;transition:inherit;width:100%}:where(.brxe-image) img.bricks-lazy-hidden+figcaption{display:none}:where(.brxe-image) .icon{color:#fff;font-size:60px;pointer-events:none;position:absolute;right:50%;text-align:center;top:50%;transform:translate(50%,-50%);z-index:5}:where(.brxe-image) .bricks-image-caption{background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 70%,transparent);bottom:0;color:#fff;font-size:inherit;margin:0;padding:10px 15px;pointer-events:none;position:absolute;text-align:center;width:100%;z-index:1}}@layer bricks {:where(.brxe-heading).has-separator{align-items:center;display:inline-flex;gap:20px}:where(.brxe-heading)>[contenteditable]{display:inline-block;text-decoration:inherit}:where(.brxe-heading) .separator{border-top:1px solid;flex-grow:1;flex-shrink:0;height:1px}}.bpc-guide__eyebrow { margin: 0; color: var(--primary-light); font-size: var(--text-s); font-weight: 600; line-height: 1.4; }.bpc-guide__title { max-width: 22ch; margin: 0; color: var(--white); font-size: var(--h1); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }.bpc-guide__summary { max-width: 62ch; margin: 0; color: color-mix(in oklch, var(--white) 82%, transparent); font-size: var(--text-m); line-height: 1.65; white-space: pre-line; text-wrap: pretty; }.bpc-guide__byline { --bpc-byline-color: color-mix(in oklch, var(--white) 72%, transparent); --bpc-byline-strong: var(--white); --bpc-byline-sep-color: color-mix(in oklch, var(--white) 35%, transparent); align-self: stretch; margin-block-start: var(--space-xs); padding-block-start: var(--space-s); border-block-start: 1px solid color-mix(in oklch, var(--white) 18%, transparent); }.bpc-guide__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); min-width: 0; }.bpc-guide__image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }.bpc-guide__media { aspect-ratio: 16 / 9; margin: 0; }@media (width >= 1100px) { .bpc-guide__media { aspect-ratio: 1; }}.bpc-guide__header-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); align-items: center; width: 100%; max-width: var(--content-width); margin-inline: auto; }@media (width >= 1100px) { .bpc-guide__header-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-xxl); }}.bpc-guide__header { padding-block: calc(var(--bpc-header-h-mobile, 30px) + var(--space-l)) var(--space-xl); padding-inline: var(--gutter); color: var(--white); background-image: linear-gradient(135deg, color-mix(in srgb, var(--base-ultra-dark) 70%, var(--primary-dark)) 0%, var(--primary-dark) 40%, var(--primary) 100%); }.bpc-guide__rail { min-width: 0; }@media (width >= 1100px) { .bpc-guide__rail { position: sticky; inset-block-start: calc(var(--bpc-header-h, 72px) + var(--space-m)); }}.bpc-guide__content { min-width: 0; }.bpc-guide__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); width: 100%; max-width: var(--content-width); margin-inline: auto; padding-block: var(--space-xl) 0; padding-inline: var(--gutter); }@media (width >= 1100px) { .bpc-guide__layout { grid-template-columns: var(--bpc-guide-rail) minmax(0, var(--bpc-guide-measure)); justify-content: center; column-gap: var(--space-xxl); align-items: start; } .bpc-guide__layout { padding-block-start: var(--space-xxl); }}.bpc-guide__author { min-width: 0; }@media (width >= 1100px) { .bpc-guide__author { grid-column: 2; }}.bpc-guide__back { display: inline-flex; align-items: center; gap: 0.4em; justify-self: start; color: var(--primary-dark); font-size: var(--text-s); font-weight: 600; text-decoration: none; } .bpc-guide__back::before { content: ""; flex-shrink: 0; width: 1.15em; height: 1.15em; background-color: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.2s; } .bpc-guide__back:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--radius); }@media (hover: hover) { .bpc-guide__back:hover { color: var(--primary); } .bpc-guide__back:hover::before { transform: translateX(-0.25em); }}@media (width >= 1100px) { .bpc-guide__back { grid-column: 2; }}@media (prefers-reduced-motion: reduce) { .bpc-guide__back::before { transition: none; }}.bpc-guide__footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); width: 100%; max-width: var(--content-width); margin-inline: auto; padding-block: var(--space-xxl) var(--section-space-m); padding-inline: var(--gutter); }@media (width >= 1100px) { .bpc-guide__footer { grid-template-columns: var(--bpc-guide-rail) minmax(0, var(--bpc-guide-measure)); justify-content: center; column-gap: var(--space-xxl); align-items: start; }}.bpc-guide { --bpc-guide-rule: var(--neutral-trans-10); --bpc-guide-rail: 18rem; --bpc-guide-measure: 44rem; display: flex; flex-direction: column; background-color: var(--white); }