/**
 * General
 */
:where(.is-layout-flex) { gap: inherit !important; }
:where(.is-layout-grid) { gap: var(--grid-gap); }
.post-content [class*="pattern-portfolio-content-"] .wp-block-table { max-width: unset; }
.post-content [class*="pattern-portfolio-content-"] h1,
.post-content [class*="pattern-portfolio-content-"] h2,
.post-content [class*="pattern-portfolio-content-"] h3,
.post-content [class*="pattern-portfolio-content-"] h4,
.post-content [class*="pattern-portfolio-content-"] h5,
.post-content [class*="pattern-portfolio-content-"] h6 { max-width: unset; width: 100%; }

@media screen and ( max-width: 576px ) {
    .hide-on-mobile { display: none; }
}

/**
 * Section
 */

.post-content [class*="pattern-portfolio-section-"] { padding-left: var(--section-spacing-left); padding-right: var(--section-spacing-right); padding-top: var(--section-spacing-top); padding-bottom: var(--section-spacing-bottom); }
.post-content [class*="pattern-portfolio-section-"].is-style-portfolio-dynamic-primary,
.post-content [class*="pattern-portfolio-content-"] div.is-style-portfolio-dynamic-primary,
.post-content [class*="pattern-portfolio-content-"] details > div > .is-style-portfolio-dynamic-primary { background-color: var(--bg-dynamic-primary); }
.post-content [class*="pattern-portfolio-section-"].is-style-portfolio-dynamic-secondary,
.post-content [class*="pattern-portfolio-content-"] div.is-style-portfolio-dynamic-secondary,
.post-content [class*="pattern-portfolio-content-"] details > div > .is-style-portfolio-dynamic-secondary { background-color: var(--bg-dynamic-secondary); }
.post-content [class*="pattern-portfolio-section-"].is-style-portfolio-light-primary,
.post-content [class*="pattern-portfolio-content-"] div.is-style-portfolio-light-primary,
.post-content [class*="pattern-portfolio-content-"] details > div > .is-style-portfolio-light-primary { background-color: var(--bg-light-primary); }
.post-content [class*="pattern-portfolio-section-"].is-style-portfolio-light-secondary,
.post-content [class*="pattern-portfolio-content-"] div.is-style-portfolio-light-secondary,
.post-content [class*="pattern-portfolio-content-"] details > div > .is-style-portfolio-light-secondary { background-color: var(--bg-light-secondary); }
.post-content [class*="pattern-portfolio-section-"].is-style-portfolio-dark-primary,
.post-content [class*="pattern-portfolio-content-"] div.is-style-portfolio-dark-primary,
.post-content [class*="pattern-portfolio-content-"] details > div > .is-style-portfolio-dark-primary { background-color: var(--bg-dark-primary); }
.post-content [class*="pattern-portfolio-section-"].is-style-portfolio-dark-secondary,
.post-content [class*="pattern-portfolio-content-"] div.is-style-portfolio-dark-secondary,
.post-content [class*="pattern-portfolio-content-"] details > div > .is-style-portfolio-dark-secondary { background-color: var(--bg-dark-secondary); }
.post-content [class*="pattern-portfolio-section-"] > .is-layout-grid { max-width: 1520px; grid-column-gap: var(--grid-gap); grid-row-gap: var(--grid-gap-none); margin-top: 0; margin-bottom: 0; }
.post-content [class*="pattern-portfolio-section-"] .content-stack { max-width: var(--max-width-default); }
.post-content [class*="pattern-portfolio-section-"] .section-grid-container > figure > .frame > .image > .small-image,
.post-content [class*="pattern-portfolio-section-"] .section-grid-container > figure > .frame > .image > img { border-radius: 4px; }

.post-content [class*="pattern-portfolio-content-"].is-layout-grid { grid-column-gap: var(--grid-gap); grid-row-gap: var(--grid-gap-none); }
.post-content [class*="pattern-portfolio-content-"] * + p,
.post-content [class*="pattern-portfolio-content-"] * + details { margin-top: var(--content-spacing-medium); }
.post-content [class*="pattern-portfolio-content-"] .is-style-portfolio-number-m + .is-style-portfolio-caption-2 { margin-top: 4px; }
.post-content [class*="pattern-portfolio-content-"] .icon-48 { width: 48px; height: 48px; }
.post-content [class*="pattern-portfolio-content-"] .icon-32 { width: 32px; height: 32px; }
.post-content [class*="pattern-portfolio-content-"] .icon-24 { width: 24px; height: 24px; }
.post-content [class*="pattern-portfolio-content-"] .icon-16 { width: 16px; height: 16px; }
.post-content [class*="pattern-portfolio-content-"] [class*="is-style-image-"] { max-width: unset; }
.post-content [class*="pattern-portfolio-content-"] [class*="is-style-image-"] figcaption, .post-content [class*="pattern-portfolio-content-"] [class*="is-style-image-"] .wp-caption-text, .post-content [class*="pattern-portfolio-content-"] [class*="is-style-image-"] .wp-element-caption { margin-left: 0; text-align: left; font-size: var(--font-size-p-caption-1); }

@supports (padding: max(0px)) {
    .post-content [class*="pattern-portfolio-section-"] {
        padding-left: max(var(--section-spacing-left), env(safe-area-inset-left)) !important;
        padding-right: max(var(--section-spacing-right), env(safe-area-inset-right)) !important;
    }
}


/* Sections */

.post-content .pattern-portfolio-section-hero { min-width: 100%; padding: var(--general-page-padding); }
html:lang(en-US) .post-content .pattern-portfolio-section-hero h1 { font-family: var(--display-font-en-title); }
html:lang(zh-CN) .post-content .pattern-portfolio-section-hero h1 { font-family: var(--display-font-zh-title); }
.post-content .pattern-portfolio-section-hero .wp-block-cover__inner-container { max-width: 1520px; flex-grow: 1; }
.post-content .pattern-portfolio-section-hero .info-plate { gap: var(--content-spacing-small) !important; background: var(--bg-dark-secondary); padding: var(--content-spacing-medium); border-radius: 4px; }
.post-content .pattern-portfolio-section-hero .info-plate p { font-size: var(--font-size-p-info-plate); }
.post-content .pattern-portfolio-section-hero .info-plate hr { background: var(--border-info-plate-separator) !important; }

.post-content .pattern-portfolio-section-title-col-4-content-col-12 > .is-layout-grid { border-top: 1px solid var(--border-section-top); padding-top: var(--section-top-border-inner-spacing-top); }
.post-content .pattern-portfolio-container-content-col-12 [class*="pattern-portfolio-content-"] + [class*="pattern-portfolio-content-"] > .is-style-portfolio-highlight { margin-top: var(--content-spacing-xlarge); }
.post-content .pattern-portfolio-container-content-col-12 [class*="pattern-portfolio-content-"] + [class*="pattern-portfolio-content-"]:not([class*="pattern-portfolio-content-img-"]):not([class*="-text-group-"]):not([class*="-card-group-"]):not([class*="-btn-group-"]):not([class*="-table-"]) > *:first-child:not(.is-style-portfolio-highlight) { margin-top: var(--content-spacing-medium); }
.post-content .pattern-portfolio-container-content-col-12 [class*="pattern-portfolio-content-"][class*="-img-"] + [class*="pattern-portfolio-content-"]:not([class*="pattern-portfolio-content-img-"]):not([class*="-text-group-"]):not([class*="-card-group-"]):not([class*="-btn-group-"]):not([class*="-table-"]) > *:first-child:not(.is-style-portfolio-highlight),
.post-content .pattern-portfolio-container-content-col-12 [class*="pattern-portfolio-content-"][class*="-img-"] + [class*="pattern-portfolio-content-"]:not([class*="pattern-portfolio-content-img-"]):not([class*="-text-group-"]):not([class*="-card-group-"]):not([class*="-btn-group-"]):not([class*="-table-"]) > [class*="text-aside-"]:first-of-type { margin-top: var(--content-spacing-large); }

.post-content .pattern-portfolio-container-content-col-12 [class*="pattern-portfolio-content-text-group-"] + [class*="pattern-portfolio-content-"]:not([class*="pattern-portfolio-content-img-"]):not([class*="-text-group-"]):not([class*="-card-group-"]):not([class*="-btn-group-"]):not([class*="-table-"]) > *:first-child:not(.is-style-portfolio-highlight),
.post-content .pattern-portfolio-container-content-col-12 [class*="pattern-portfolio-content-text-group-"] + [class*="pattern-portfolio-content-"]:not([class*="pattern-portfolio-content-img-"]):not([class*="-text-group-"]):not([class*="-card-group-"]):not([class*="-btn-group-"]):not([class*="-table-"]) > *:first-child:not(.is-style-portfolio-highlight) + [class*="-aside-col-"] { margin-top: var(--content-spacing-large); }

.post-content [class*="pattern-portfolio-content-"][class*="-text-aside-col-"] .text-aside-col-4 { grid-column: 1 / 13; margin-top: var(--content-spacing-medium); }
.post-content [class*="pattern-portfolio-content-"][class*="-text-aside-col-"] [class*="-aside-col-"] figure .small-image,
.post-content [class*="pattern-portfolio-content-"][class*="-text-aside-col-"] [class*="-aside-col-"] figure img { border-radius: 4px; }

.post-content [class*="pattern-portfolio-content-numbers-"] [class*="numbers-col-"] { grid-column: span 10; }

.post-content [class*="pattern-portfolio-content-numbers-"] [class*="numbers-col-"] > div { row-gap: 0 !important; }

.post-content .pattern-portfolio-section-svg-sticky-col-12 { position: sticky; position: -webkit-sticky; top: calc( -1 * var(--section-spacing-top) ); z-index: -1; }
.post-content .pattern-portfolio-section-svg-sticky-col-12 .wp-block-inline-svg-block { height: 100vh; }
.post-content .pattern-portfolio-section-svg-sticky-col-12 .wp-block-inline-svg-block svg { max-height: 100vh; }

.post-content .pattern-portfolio-section-title-col-4-content-col-12.is-style-portfolio-transparent-after-sticky { background: transparent; padding-bottom: 100vh; }
.post-content .pattern-portfolio-section-title-col-4-content-col-12.is-style-portfolio-transparent-after-sticky > div { border-top: none; }
.post-content .pattern-portfolio-section-title-col-4-content-col-12.is-style-portfolio-transparent-after-sticky .pattern-portfolio-container-content-col-12 { padding: var(--content-spacing-large); background-color: var(--bg-dynamic-reversed-layer); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 4px; }

.post-content [class*="pattern-portfolio-content-"] + [class*="pattern-portfolio-content-img-"] figure { margin-top: var(--content-spacing-large) !important; }
.post-content [class*="pattern-portfolio-content-img-"] .text-aside-col-4 { grid-column: 10 / 13; margin-top: var(--content-spacing-large) !important; }
.post-content [class*="pattern-portfolio-container-"] > :first-child[class*="pattern-portfolio-content-img-"] figure { margin-top: 0 !important; }
.post-content .wp-block-group + .wp-block-group figure { margin-top: 0; margin-bottom: 0; }

.post-content [class*="pattern-portfolio-content-img-"] .is-style-image-default .small-image,
.post-content [class*="pattern-portfolio-content-img-"] .is-style-image-default img { border-radius: 4px; }
.post-content [class*="pattern-portfolio-content-img-"] .is-style-image-default .zoom-image img { border-radius: 0; }

.post-content [class*="pattern-portfolio-content-"] [class*="icon-"] { flex-shrink: 0; }

.post-content [class*="pattern-portfolio-content-text-group-"] { grid-row-gap: var(--grid-gap) !important; margin-top: var(--content-spacing-large) !important; }
.post-content [class*="pattern-portfolio-content-text-group-with-left-border-"] > div { padding-left: var(--content-spacing-small); border-left: 1px solid var(--border-group-left); }
.post-content [class*="pattern-portfolio-content-text-group-"] * { row-gap: 0 !important; }
.post-content [class*="pattern-portfolio-content-text-group-"] [class*="icon-"] + h3 { margin-top: var(--content-spacing-small) !important; }
.post-content [class*="pattern-portfolio-content-text-group-"] h3 { min-height: 48px; }
.post-content [class*="pattern-portfolio-content-text-group-"] p { min-height: 144px; margin-top: 0; font-size: var(--font-size-p-secondary) !important; color: var(--text-color-secondary); flex-grow: 1; }
.post-content [class*="pattern-portfolio-content-text-group-"] p + [class*="icon-"] { margin-top: var(--content-spacing-medium); }

.post-content [class*="pattern-portfolio-content-text-group-"] > div > div { column-gap: var(--content-spacing-xsmall) !important; }
.post-content [class*="pattern-portfolio-content-text-group-"] > div > div > .icon-48 + h3 { margin-top: 12px !important; }
.post-content [class*="pattern-portfolio-content-text-group-"] > div > div > .icon-32 + h3 { margin-top: 4px !important; }
.post-content [class*="pattern-portfolio-content-text-group-"] > div > div > .icon-24 + h3 { margin-top: 0 !important; }

.post-content .pattern-portfolio-container-content-col-12 > [class*="pattern-portfolio-content-text-group-"]:first-child { margin-top: 0 !important; }

.post-content [class*="pattern-portfolio-content-card-group-"] { grid-gap: var(--grid-gap-xsmall) !important; margin-top: var(--content-spacing-large) !important; }
.post-content [class*="pattern-portfolio-content-card-group-"] [class*="icon-"] + h3 { margin-top: var(--content-spacing-small) !important; }
.post-content [class*="pattern-portfolio-content-card-group-"] h3 { min-height: 48px; }
.post-content [class*="pattern-portfolio-content-card-group-"] p { margin-top: 0; flex-grow: 1; }
.post-content [class*="pattern-portfolio-content-card-group-"] p:not(.fullwidth) { max-width: 75% !important; }
.post-content [class*="pattern-portfolio-content-card-group-"] p + [class*="icon-"] { margin-top: var(--content-spacing-medium); }
.post-content [class*="pattern-portfolio-content-card-group-"] h3 + .wp-block-group { width: 100%; }
.post-content [class*="pattern-portfolio-content-card-group-"] .wp-block-group + p { margin-top: var(--content-spacing-small); }
.post-content [class*="pattern-portfolio-content-card-group-"] > div,
.post-content [class*="pattern-portfolio-content-btn-group-"] a > div { background-color: var(--bg-dynamic-primary); border-radius: 4px; padding: var(--content-spacing-small); grid-row-gap: 0 !important; }
.post-content [class*="pattern-portfolio-content-card-group-"] [class*="is-style-portfolio-caption-"] { color: var(--text-color-secondary); }

.post-content [class*="pattern-portfolio-content-btn-group-"] { grid-gap: var(--grid-gap-xsmall) !important; margin-top: var(--content-spacing-large) !important; }
.post-content [class*="pattern-portfolio-content-btn-group-"] a > div { margin-top: 0; margin-bottom: 0; transition: background-color 120ms ease 20ms; }
.post-content [class*="pattern-portfolio-content-btn-group-"] a:hover > div { background-color: var(--bg-dynamic-primary-hover); }
.post-content [class*="pattern-portfolio-content-btn-group-"] a:active,
.post-content [class*="pattern-portfolio-content-btn-group-"] a:focus { outline: 2px solid var(--border-link-wrapper-outline); border-radius: 4px; }
.post-content [class*="pattern-portfolio-content-btn-group-"] a > div h4.is-style-portfolio-heading-4 { font-weight: 700; }
.post-content [class*="pattern-portfolio-content-btn-group-"] a > div p { margin-top: 0; min-height: 80px; flex-grow: 1; }

.post-content [class*="pattern-portfolio-container-"] * + [class*="pattern-portfolio-content-media-text-group-"] { margin-top: var(--content-spacing-large); margin-bottom: var(--content-spacing-large); }
.post-content [class*="pattern-portfolio-content-media-text-group-"] { grid-row-gap: var(--grid-gap) !important; }
.post-content [class*="pattern-portfolio-content-media-text-group-"] > * { grid-row-gap: var(--grid-gap-none) !important; }
.post-content [class*="pattern-portfolio-content-media-text-group-"] > div > div[class*="is-style-portfolio-"] { border-radius: 4px; overflow: hidden; }
.post-content [class*="pattern-portfolio-content-media-text-group-"] > div > div[class*="is-style-portfolio-"]:not([class*="with-link-btn-corner"]) { padding: var(--content-spacing-small); }
.post-content [class*="pattern-portfolio-content-media-text-group-"] h3 { font-size: var(--font-size-heading-3); margin: 0 0 var(--content-spacing-xsmall) !important; }
.post-content [class*="pattern-portfolio-content-media-text-group-"] * + h3 { margin-top: var(--content-spacing-medium) !important; }
.post-content [class*="pattern-portfolio-content-media-text-group-"] p { font-size: var(--font-size-p-secondary) !important; margin-top: var(--content-spacing-xsmall); }
html:lang(en-US) .post-content [class*="pattern-portfolio-content-"] ul,
html:lang(en-US) .post-content [class*="pattern-portfolio-content-"] ol { line-height: var(--line-height-paragraph-en-l); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-content-"] ul,
html:lang(zh-CN) .post-content [class*="pattern-portfolio-content-"] ol { line-height: var(--line-height-paragraph-zh-l); }
.post-content [class*="pattern-portfolio-content-"] ul li,
.post-content [class*="pattern-portfolio-content-"] ol li { margin-bottom: 8px; }
.post-content [class*="pattern-portfolio-content-media-text-group-"] p + ul,
.post-content [class*="pattern-portfolio-content-media-text-group-"] p + ol,
.post-content [class*="pattern-portfolio-content-media-text-group-"] ul + p,
.post-content [class*="pattern-portfolio-content-media-text-group-"] ol + p { margin-top: var(--content-spacing-small); }
.post-content [class*="pattern-portfolio-content-media-text-group-"] p + ul li:not(:last-child),
.post-content [class*="pattern-portfolio-content-media-text-group-"] p + ol li:not(:last-child) { margin-bottom: 4px !important; }
.post-content [class*="pattern-portfolio-content-media-text-group-"] p + ul li:last-child,
.post-content [class*="pattern-portfolio-content-media-text-group-"] p + ol li:last-child { margin-bottom: 0 !important; }

.post-content .pattern-portfolio-content-footnote-col-8 p.is-style-portfolio-caption-2 { color: var(--text-color-secondary); }
.post-content .pattern-portfolio-content-footnote-col-8 p.is-style-portfolio-caption-2 + p.is-style-portfolio-caption-2 { margin-top: var(--content-spacing-small); }

.post-content [class*="pattern-portfolio-content-"] .wp-block-details[class*="is-style-details-filled"],
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-bordered { border-radius: 4px; }
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-filled-primary { background-color: var(--bg-accordion-filled-primary) !important; }
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-filled-secondary { background-color: var(--bg-accordion-filled-secondary) !important; }
.post-content [class*="pattern-portfolio-content-"] .wp-block-details[class*="is-style-details-filled"] summary,
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-bordered summary { padding: var(--content-spacing-small) var(--content-spacing-small) var(--content-spacing-small) var(--content-spacing-medium); }
.post-content [class*="pattern-portfolio-content-"] .wp-block-details[class*="is-style-details-filled"] > .wp-block-group,
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-bordered > .wp-block-group { padding: var(--content-spacing-small) var(--content-spacing-medium) var(--content-spacing-medium); }
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-lined > .wp-block-group { padding-top: var(--content-spacing-small); padding-bottom: var(--content-spacing-medium); }
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-lined,
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-bordered { border-color: var(--border-accordion) !important; }
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-filled-primary summary:hover { background-color: var(--bg-accordion-filled-primary-hover) !important; }
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-filled-secondary summary:hover { background-color: var(--bg-accordion-filled-secondary-hover) !important; }
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-bordered summary:hover { background-color: var(--bg-accordion-bordered-hover) !important; }
.post-content [class*="pattern-portfolio-content-"] .wp-block-details.is-style-details-lined[open] summary:hover { background-color: var(--bg-accordion-lined-hover) !important; }
.post-content [class*="pattern-portfolio-content-"] details > div > * + * { margin-top: var(--content-spacing-medium) !important; }
.post-content [class*="pattern-portfolio-content-"] details > div > [class*="is-style-portfolio-dynamic-"],
.post-content [class*="pattern-portfolio-content-"] details > div > [class*="is-style-portfolio-light-"],
.post-content [class*="pattern-portfolio-content-"] details > div > [class*="is-style-portfolio-dark-"],
.post-content [class*="pattern-portfolio-content-"] details > div > figure > .frame > .image > .small-image,
.post-content [class*="pattern-portfolio-content-"] details > div > figure > .frame > .image > img { border-radius: 4px; }
.post-content [class*="pattern-portfolio-content-"] details > div > figure { cursor: default; pointer-events: none; }
.post-content [class*="pattern-portfolio-content-"] details > div figcaption,
.post-content [class*="pattern-portfolio-content-"] details > div .wp-caption-text,
.post-content [class*="pattern-portfolio-content-"] details > div .wp-element-caption { text-align: left; margin: 0; padding-top: var(--content-spacing-small); color: var(--text-color-secondary); }
.post-content [class*="pattern-portfolio-content-"] details > div h3 + p { margin-top: 0 !important; }
.post-content [class*="pattern-portfolio-content-"] details > div * { row-gap: 0 !important; }

.post-content [class*="pattern-portfolio-content-table-"] { margin-top: var(--content-spacing-large) !important; margin-bottom: var(--content-spacing-large) !important; }
.post-content [class*="pattern-portfolio-content-"] figure.wp-block-table { margin-top: 0; }
.post-content [class*="pattern-portfolio-content-"] * + figure.wp-block-table { margin-top: var(--content-spacing-large); }
.post-content [class*="pattern-portfolio-content-"] figure.wp-block-table table { margin-top: 0; margin-bottom: 0; }
.post-content [class*="pattern-portfolio-content-"] tr:first-child { border-top: none; }
.post-content [class*="pattern-portfolio-content-"] .wp-block-table th { border: none; }
.post-content [class*="pattern-portfolio-content-"] table thead { background-color: var(--bg-table-header); border: none; }
.post-content [class*="pattern-portfolio-content-"] table th { color: var(--text-color-primary) !important; padding: var(--content-spacing-small); vertical-align: top; height: 64px; box-sizing: border-box; }
.post-content [class*="pattern-portfolio-content-"] table td { color: var(--text-color-secondary) !important; border: none; border-bottom: 1px solid var(--border-table-td-border); padding: var(--content-spacing-small); vertical-align: top; box-sizing: border-box; }

@media (hover: none) and (pointer: coarse) {
    .post-content [class*="pattern-portfolio-content-btn-group-"] a > div {
        transition: none !important;
    }
}

@media only screen and ( max-width: 1280px ) {
    .post-content .pattern-portfolio-section-hero .content-stack { grid-column: span 6; }
    .post-content .pattern-portfolio-section-text-col-8 .content-stack { grid-column: span 6; }
    .post-content [class*="pattern-portfolio-content-img-col-5-3"] > figure:nth-of-type(1) { grid-column: 1 / 5; }
    .post-content [class*="pattern-portfolio-content-img-col-5-3"] > figure:nth-of-type(2) { grid-column: 5 / 9; }
}

@media only screen and ( max-width: 1024px ) {
    .post-content .pattern-portfolio-section-hero .content-stack { grid-column: span 8; }
    .post-content .pattern-portfolio-section-text-col-8 .content-stack { grid-column: span 12; }
    .post-content .pattern-portfolio-section-title-col-4-content-col-12 .section-grid-container > .title-col-4 { grid-column: span 16; }
    .post-content .pattern-portfolio-section-title-col-4-content-col-12 .section-grid-container > .pattern-portfolio-container-content-col-12 { grid-column: span 16; }
    .post-content .pattern-portfolio-container-content-col-12 { border-radius: 0; }
    .post-content [class*="pattern-portfolio-content-text-group-"] > div { grid-column: span 5; padding-left: 0; border-left: none; padding-top: var(--content-spacing-small); border-top: 1px solid var(--border-group-top); padding-bottom: var(--content-spacing-medium); }
    .post-content .pattern-portfolio-content-text-group-with-left-border-col-6-6 > div { grid-column: span 6; }
    .post-content [class*="pattern-portfolio-content-text-group-"] .is-style-portfolio-heading-3, .post-content [class*="pattern-portfolio-content-text-group-"] p { min-height: unset; }
}

@media only screen and ( min-width: 768px ) {
    .post-content [class*="pattern-portfolio-content-numbers-"] [class*="numbers-col-"] { grid-column: span 8; }
    
    .post-content [class*="pattern-portfolio-content-"][class*="-text-aside-col-"] .text-aside-col-4 { grid-column: 10 / 13; }
}

@media only screen and ( max-width: 768px ) {
    .post-content [class*="pattern-portfolio-content-"] .text-aside-col-4 { grid-column: span 8; margin: var(--content-spacing-large) var(--content-spacing-large) var(--content-spacing-small); }
    .post-content .pattern-portfolio-content-text-col-8 p { grid-column: span 10; }
    .post-content .pattern-portfolio-content-text-col-8-text-aside-col-4 p { grid-column: span 10; }
    .post-content [class*="pattern-portfolio-content-img-col-5-3"] > figure:nth-of-type(1) { grid-column: span 12; }
    .post-content [class*="pattern-portfolio-content-img-col-5-3"] > figure:nth-of-type(2) { grid-column: span 9; }
    .post-content .pattern-portfolio-content-text-col-3-img-col-9 > p,
    .post-content .pattern-portfolio-content-text-col-3-img-col-9 > div.wp-block-group,
    .post-content .pattern-portfolio-content-text-col-3-img-col-9 > figure,
    .post-content .pattern-portfolio-content-text-col-3-img-col-9 > .diagram-wrapper { grid-column: span 12; }
    .post-content .pattern-portfolio-container-content-col-12 [class*="pattern-portfolio-content-text-group-"] + [class*="pattern-portfolio-content-"]:not([class*="pattern-portfolio-content-img-"]):not([class*="-group-"]):not([class*="-card-group-"]) > *:first-child:not(.is-style-portfolio-highlight) + [class*="-aside-col-"] { margin-top: var(--content-spacing-medium); }
    .post-content .pattern-portfolio-content-img-col-6-6.not-stacked-on-mobile > figure { grid-column: span 12; }
    .post-content [class*="pattern-portfolio-content-text-group-"] > div { grid-column: span 10; }
    .post-content .pattern-portfolio-content-text-group-with-left-border-col-6-6 > div { grid-column: span 10; }
    .post-content [class*="pattern-portfolio-content-card-group-"] p { max-width: 100% !important; }
    .post-content .pattern-portfolio-content-card-group-col-4-4-4 > div { grid-column: span 6; }
    .post-content .pattern-portfolio-content-img-col-4 figure { grid-column: 1 / 7; }
    .post-content [class*="pattern-portfolio-content-btn-group-"] a { grid-column: 1 / 11; }
    .post-content [class*="pattern-portfolio-content-"] .wp-block-details { grid-column: span 12; }
}

@media only screen and ( max-width: 576px ) {
    .post-content .single-column-on-mobile > div.wp-block-group { grid-column: span 12; }
    
    .post-content .pattern-portfolio-section-hero .content-stack { grid-column: span 12; }
    .post-content .pattern-portfolio-section-hero .content-stack.has-info-plate { grid-column: span 16; }
    .post-content [class*="pattern-portfolio-content-"] .text-aside-col-4 { grid-column: span 12; }
    .post-content .pattern-portfolio-section-text-col-8 .content-stack { grid-column: span 16; }
    .post-content .pattern-portfolio-content-footnote-col-8 p.is-style-portfolio-caption-2 { grid-column: 1 / 13; }
    .post-content .pattern-portfolio-content-img-col-4 figure { grid-column: 1 / 9; }
}


/**
 * Classes
 */

/* Paragraph */

.post-content [class*="pattern-portfolio-"] h1.is-style-portfolio-page-title { font-size: var(--font-size-page-title); font-weight: 800; margin-top: 0; margin-bottom: var(--content-spacing-medium); }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] h1.is-style-portfolio-page-title { line-height: var(--line-height-paragraph-en-s); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] h1.is-style-portfolio-page-title { line-height: var(--line-height-paragraph-zh-s); }

.post-content [class*="pattern-portfolio-"] h2.is-style-portfolio-heading-2 { font-size: var(--font-size-heading-2); font-weight: 800; margin-top: 0; margin-bottom: var(--content-spacing-large); margin-left: 0 !important; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] h2.is-style-portfolio-heading-2 { line-height: var(--line-height-paragraph-en-s); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] h2.is-style-portfolio-heading-2 { line-height: var(--line-height-paragraph-zh-s); }

.post-content [class*="pattern-portfolio-"] h3.is-style-portfolio-heading-3 { font-size: var(--font-size-heading-3); font-weight: 400; margin-top: 0; margin-bottom: var(--content-spacing-medium); margin-left: 0 !important; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] h3.is-style-portfolio-heading-3 { line-height: var(--line-height-paragraph-en-s); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] h3.is-style-portfolio-heading-3 { line-height: var(--line-height-paragraph-zh-s); }

.post-content [class*="pattern-portfolio-"] h4.is-style-portfolio-heading-4 { font-size: var(--font-size-heading-4); font-weight: 400; margin-top: 0; margin-bottom: var(--content-spacing-xsmall); margin-left: 0 !important; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] h4.is-style-portfolio-heading-4 { line-height: var(--line-height-paragraph-en-s); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] h4.is-style-portfolio-heading-4 { line-height: var(--line-height-paragraph-zh-s); }

.post-content [class*="pattern-portfolio-"] p.is-style-portfolio-highlight { font-size: var(--font-size-p-highlight); font-weight: 400; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-highlight { line-height: var(--line-height-paragraph-en-m); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-highlight { line-height: var(--line-height-paragraph-zh-m); }

.post-content [class*="pattern-portfolio-"] p.is-style-portfolio-highlight-2 { font-size: var(--font-size-p-highlight-2); font-weight: 800; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-highlight-2 { line-height: var(--line-height-paragraph-en-s); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-highlight-2 { line-height: var(--line-height-paragraph-zh-s); }

.post-content [class*="pattern-portfolio-"] th, td { font-size: var(--font-size-p-table); word-break: normal !important; }
.post-content [class*="pattern-portfolio-"] th { font-weight: 700; }
.post-content [class*="pattern-portfolio-"] td { font-weight: 400; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] th,
html:lang(en-US) .post-content [class*="pattern-portfolio-"] td { line-height: var(--line-height-paragraph-en-m); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] th,
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] td { line-height: var(--line-height-paragraph-zh-m); }

.post-content [class*="pattern-portfolio-"] p { font-size: var(--font-size-p); font-weight: 400; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] p { line-height: var(--line-height-paragraph-en-l); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] p { line-height: var(--line-height-paragraph-zh-l); }

.post-content [class*="pattern-portfolio-"] p.is-style-portfolio-secondary,
.post-content [class*="pattern-portfolio-"] ul.is-style-portfolio-secondary,
.post-content [class*="pattern-portfolio-"] ol.is-style-portfolio-secondary { font-size: var(--font-size-p-secondary); font-weight: 400; color: var(--text-color-secondary); }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-secondary,
html:lang(en-US) .post-content [class*="pattern-portfolio-"] ul.is-style-portfolio-secondary,
html:lang(en-US) .post-content [class*="pattern-portfolio-"] ol.is-style-portfolio-secondary { line-height: var(--line-height-paragraph-en-l); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-secondary,
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] ul.is-style-portfolio-secondary,
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] ol.is-style-portfolio-secondary { line-height: var(--line-height-paragraph-zh-l); }

.post-content [class*="pattern-portfolio-content-"] > div > ul:last-of-type,
.post-content [class*="pattern-portfolio-content-"] > div > ol:last-of-type { margin-bottom: 0; }
.post-content [class*="pattern-portfolio-content-"] > div > ul li:not(:last-child),
.post-content [class*="pattern-portfolio-content-"] > div > ol li:not(:last-child) { margin-bottom: var(--content-spacing-xsmall); }

.post-content [class*="pattern-portfolio-content-"] p + ul,
.post-content [class*="pattern-portfolio-content-"] p + ol { margin-top: var(--content-spacing-medium); margin-bottom: 0; }

.post-content [class*="pattern-portfolio-"] p.is-style-portfolio-caption-1 { font-size: var(--font-size-p-caption-1); font-weight: 400; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-caption-1 { line-height: var(--line-height-paragraph-en-s); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-caption-1 { line-height: var(--line-height-paragraph-zh-s); }

.post-content [class*="pattern-portfolio-content-img-"] figure figcaption,
.post-content [class*="pattern-portfolio-content-img-"] figure .wp-caption-text,
.post-content [class*="pattern-portfolio-content-img-"] figure .wp-element-caption { text-align: left; font-size: var(--font-size-p-caption-1); font-weight: 400; margin-top: var(--content-spacing-medium); margin-bottom: 0; padding: 0; color: var(--text-color-secondary) !important; }
html:lang(en-US) .post-content [class*="pattern-portfolio-content-img-"] figure figcaption,
html:lang(en-US) .post-content [class*="pattern-portfolio-content-img-"] figure .wp-caption-text,
html:lang(en-US) .post-content [class*="pattern-portfolio-content-img-"] figure .wp-element-caption { line-height: var(--line-height-paragraph-en-m); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-content-img-"] figure figcaption,
html:lang(zh-CN) .post-content [class*="pattern-portfolio-content-img-"] figure .wp-caption-text,
html:lang(zh-CN) .post-content [class*="pattern-portfolio-content-img-"] figure .wp-element-caption { line-height: var(--line-height-paragraph-zh-m); }

.post-content [class*="pattern-portfolio-"] p[class*="is-style-portfolio-number-"] + p.is-style-portfolio-caption-2 { margin-bottom: var(--content-spacing-medium); }
.post-content [class*="pattern-portfolio-"] p.is-style-portfolio-caption-2 { font-size: var(--font-size-p-caption-2); font-weight: 400; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-caption-2 { line-height: var(--line-height-paragraph-en-m); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-caption-2 { line-height: var(--line-height-paragraph-zh-m); }

.post-content [class*="pattern-portfolio-"] p.is-style-portfolio-number-m { font-size: var(--font-size-p-number-m); font-weight: 800; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-number-m { line-height: var(--line-height-paragraph-en-s); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-number-m { line-height: var(--line-height-paragraph-zh-s); }

.post-content [class*="pattern-portfolio-"] p.is-style-portfolio-number-xl { font-size: var(--font-size-p-number-xl); font-weight: 800; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-number-xl { line-height: var(--line-height-paragraph-en-s); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-number-xl { line-height: var(--line-height-paragraph-zh-s); }

.post-content [class*="pattern-portfolio-"] blockquote.is-style-portfolio-quote-side { padding-top: var(--content-spacing-medium); }
.post-content [class*="pattern-portfolio-"] blockquote.is-style-portfolio-quote-side::before { content: ""; display: block; width: 100%; height: 1px; margin-top: calc( var(--content-spacing-medium) * -1 ); margin-left: calc( var(--content-spacing-medium) * -1 ); max-width: 80px; background: var(--border-side-title); position: absolute; }
.post-content [class*="pattern-portfolio-"] blockquote.is-style-portfolio-quote-side figure { padding-top: 0; }
.post-content [class*="pattern-portfolio-"] blockquote.is-style-portfolio-quote-side figure.is-style-image-default img { border-radius: 4px; }

.post-content [class*="pattern-portfolio-"] p.is-style-portfolio-side-title { font-size: var(--font-size-side-title); font-weight: 800; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-side-title { line-height: var(--line-height-paragraph-en-s); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-side-title { line-height: var(--line-height-paragraph-zh-s); }

.post-content [class*="pattern-portfolio-"] [class*="-aside-col-"] > blockquote details summary { font-size: var(--font-size-side-accordion-title); gap: 8px; }
.post-content [class*="pattern-portfolio-"] [class*="-aside-col-"] > blockquote details summary::after { width: 16px; height: 16px; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] [class*="text-aside-"] > blockquote details summary { line-height: var(--line-height-paragraph-en-l); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] [class*="text-aside-"] > blockquote details summary { line-height: var(--line-height-paragraph-zh-l); }

.post-content [class*="pattern-portfolio-"] p.is-style-portfolio-side-paragraph,
.post-content [class*="pattern-portfolio-"] ul.is-style-portfolio-side-paragraph,
.post-content [class*="pattern-portfolio-"] ol.is-style-portfolio-side-paragraph { font-size: var(--font-size-p-side-paragraph); font-weight: 400; }
.post-content [class*="pattern-portfolio-"] p + p.is-style-portfolio-side-paragraph,
.post-content [class*="pattern-portfolio-"] p + ul.is-style-portfolio-side-paragraph,
.post-content [class*="pattern-portfolio-"] p + ol.is-style-portfolio-side-paragraph { margin-top: var(--content-spacing-small) !important; }
.post-content [class*="pattern-portfolio-"] ul.is-style-portfolio-side-paragraph:not(:last-child),
.post-content [class*="pattern-portfolio-"] ol.is-style-portfolio-side-paragraph:not(:last-child) { margin-bottom: var(--content-spacing-small) !important; }
.post-content [class*="pattern-portfolio-"] ul.is-style-portfolio-side-paragraph:last-child,
.post-content [class*="pattern-portfolio-"] ol.is-style-portfolio-side-paragraph:last-child { margin-bottom: 0 !important; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-side-paragraph,
html:lang(en-US) .post-content [class*="pattern-portfolio-"] ul.is-style-portfolio-side-paragraph,
html:lang(en-US) .post-content [class*="pattern-portfolio-"] ol.is-style-portfolio-side-paragraph { line-height: var(--line-height-paragraph-en-m); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] p.is-style-portfolio-side-paragraph,
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] ul.is-style-portfolio-side-paragraph,
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] ol.is-style-portfolio-side-paragraph { line-height: var(--line-height-paragraph-zh-m); }
.post-content [class*="pattern-portfolio-"] ul.is-style-portfolio-side-paragraph li,
.post-content [class*="pattern-portfolio-"] ol.is-style-portfolio-side-paragraph li { margin-top: 0 !important; }
.post-content [class*="pattern-portfolio-"] ul.is-style-portfolio-side-paragraph li + li,
.post-content [class*="pattern-portfolio-"] ol.is-style-portfolio-side-paragraph li + li {
    margin-top: var(--content-spacing-xsmall) !important;
}


/* Carousel */

.post-content [class*="pattern-portfolio-"] .is-style-carousel-basic + .wp-block-group { overflow: scroll; }
.post-content [class*="pattern-portfolio-"] .is-style-carousel-basic + .wp-block-group .is-style-segmented-control { background-color: var(--bg-segmented-control-filled-primary) !important; margin-bottom: var(--content-spacing-medium); }
.post-content [class*="pattern-portfolio-"] .is-style-carousel-basic + .wp-block-group .is-style-segmented-control a.activated { background-color: var(--bg-segmented-control-button-activated) !important; padding-left: var(--content-spacing-medium); padding-right: var(--content-spacing-medium); }
.post-content [class*="pattern-portfolio-"] .is-style-carousel-basic + .wp-block-group .is-style-segmented-control a:not(.activated):hover {
    background-color: var(--bg-segmented-control-button-hover) !important; }
.post-content [class*="pattern-portfolio-"] .is-style-carousel-basic figure .frame .fill,
.post-content [class*="pattern-portfolio-"] .is-style-carousel-basic figure .frame .image > img { border-radius: 4px; }
.post-content [class*="pattern-portfolio-"] .is-style-carousel-basic figcaption,
.post-content [class*="pattern-portfolio-"] .is-style-carousel-basic .wp-caption-text,
.post-content [class*="pattern-portfolio-"] .is-style-carousel-basic .wp-element-caption { margin-left: 0; text-align: left; color: var(--text-color-secondary) !important; font-size: var(--font-size-p-caption-1); margin-top: var(--content-spacing-medium); margin-bottom: var(--content-spacing-medium); padding-top: 0; }
html:lang(en-US) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic figcaption,
html:lang(en-US) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic .wp-caption-text,
html:lang(en-US) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic .wp-element-caption { line-height: var(--line-height-paragraph-en-l); }
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic figcaption,
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic .wp-caption-text,
html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic .wp-element-caption { line-height: var(--line-height-paragraph-zh-l); }

@media screen and ( max-width: 1024px ) {
    .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic + .wp-block-group { margin-left: calc( var(--general-page-padding) * (-1) ) !important; margin-right: calc( var(--general-page-padding) * (-1) ) !important; padding-left: var(--general-page-padding); padding-right: var(--general-page-padding); }
    
    html:lang(en-US) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic figcaption,
    html:lang(en-US) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic .wp-caption-text,
    html:lang(en-US) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic .wp-element-caption { min-height: 38px; }
    html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic figcaption,
    html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic .wp-caption-text,
    html:lang(zh-CN) .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic .wp-element-caption { min-height: 42px; }
}

@supports (padding: max(0px)) {
    @media screen and ( max-width: 1024px ) {
        .post-content [class*="pattern-portfolio-"] .is-style-carousel-basic + .wp-block-group {
            margin-left: min(calc( var(--general-page-padding) * (-1) ), calc( env(safe-area-inset-left) * (-1) ) ) !important;
            margin-right: min(calc( var(--general-page-padding) * (-1) ), calc( env(safe-area-inset-right) * (-1) ) ) !important;
            padding-left: max(var(--general-page-padding), env(safe-area-inset-left)) !important;
            padding-right: max(var(--general-page-padding), env(safe-area-inset-right)) !important;
        }
    }
}


/* Link */

.post-content [class*="pattern-portfolio-"] .with-link-btn-corner { position: relative; border-radius: 4px; overflow: hidden; }
.post-content [class*="pattern-portfolio-"] .with-link-btn-corner::before { content: ''; display: block; position: absolute; width: 100%; height: 100%; background-color: #00000014; }
.post-content [class*="pattern-portfolio-"] .with-link-btn-corner figure { pointer-events: none; cursor: default; }
.post-content [class*="pattern-portfolio-"] .with-link-btn-corner .wp-block-link-wrapper-block { position: absolute; bottom: 0; right: 0; border-top-left-radius: 4px; background-color: var(--bg-dynamic-primary); min-width: 50%; max-width: 356px; transition: background-color 160ms ease 40ms; }
.post-content [class*="pattern-portfolio-"] .with-link-btn-corner .wp-block-link-wrapper-block:hover { background-color: var(--bg-dynamic-primary-hover); }
.post-content [class*="pattern-portfolio-"] .with-link-btn-corner .wp-block-link-wrapper-block > div { margin: var(--content-spacing-small); }
.post-content [class*="pattern-portfolio-"] .with-link-btn-corner .wp-block-link-wrapper-block > div p { margin-top: 0; min-height: 80px; }

@media only screen and ( max-width: 768px ) {
    .post-content [class*="pattern-portfolio-"] .with-link-btn-corner .wp-block-link-wrapper-block > div p { min-height: 48px; }
}


/**
 * Variation
 */
:root {
    --max-width-default: 680px !important;
    --max-width-wide: 960px !important;
    --max-width-expanded: 1520px !important;
    --max-width-ultrawide: calc( 100vw - var(--general-page-padding) * 2 ) !important;
    --max-width-fullwidth: 100vw !important;
    
    --section-top-border-spacing-top: 24px;
    --section-top-border-inner-spacing-top: 32px;
    --section-spacing-top: 56px;
    --section-spacing-bottom: 80px;
    --section-spacing-left: var(--general-page-padding);
    --section-spacing-right: var(--general-page-padding);
    
    --grid-gap-none: 0;
    --grid-gap-xsmall: 8px;
    --grid-gap-small: 16px;
    --grid-gap-medium: 24px;
    --grid-gap-large: 32px;
    --grid-gap-xlarge: 64px;
    
    --grid-gap: var(--grid-gap-large);
    
    --content-spacing-xsmall: 8px;
    --content-spacing-small: 16px;
    --content-spacing-medium: 24px;
    --content-spacing-large: 40px;
    --content-spacing-xlarge: calc( var(--section-spacing-top) + var(--section-spacing-bottom) );
    
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-28: 28px;
    --font-size-32: 32px;
    --font-size-40: 40px;
    --font-size-64: 64px;
    --font-size-96: 96px;
    --font-size-128: 128px;
    
    --font-size-page-title: var(--font-size-32);
    --font-size-heading-2: var(--font-size-20);
    --font-size-heading-3: var(--font-size-20);
    --font-size-heading-4: var(--font-size-16);
    --font-size-heading-large: var(--font-size-96);
    --font-size-heading-medium: var(--font-size-40);
    --font-size-side-title: var(--font-size-16);
    --font-size-side-accordion-title: var(--font-size-12);
    --font-size-p-highlight: var(--font-size-32);
    --font-size-p-highlight-2: var(--font-size-28);
    --font-size-p-highlight-3: var(--font-size-20);
    --font-size-p-info-plate: var(--font-size-14);
    --font-size-p-elevated: var(--font-size-18);
    --font-size-p: var(--font-size-16);
    --font-size-p-secondary: var(--font-size-14);
    --font-size-p-caption-1: var(--font-size-14);
    --font-size-p-caption-2: var(--font-size-12);
    --font-size-p-number-m: var(--font-size-40);
    --font-size-p-number-xl: var(--font-size-96);
    --font-size-p-side-paragraph: var(--font-size-12);
    --font-size-p-table: var(--font-size-14);
    --font-size-btn-l-title: var(--font-size-16);
    --font-size-btn-m-title: var(--font-size-14);
    
    --line-height-title-en: 1.3;
    --line-height-title-zh: 1.4;
    --line-height-paragraph-en-s: 1.2;
    --line-height-paragraph-en-m: 1.3;
    --line-height-paragraph-en-l: 1.4;
    --line-height-paragraph-en-xl: 1.7;
    --line-height-paragraph-zh-s: 1.3;
    --line-height-paragraph-zh-m: 1.4;
    --line-height-paragraph-zh-l: 1.5;
    --line-height-paragraph-zh-xl: 1.8;
    
    --white: #FFFFFF;
    --black: #000000;
    --gray-10: #f4f4f4;
    --gray-20: #e0e0e0;
    --gray-30: #c6c6c6;
    --gray-40: #a8a8a8;
    --gray-50: #8d8d8d;
    --gray-60: #6f6f6f;
    --gray-70: #525252;
    --gray-80: #393939;
    --gray-90: #262626;
    --gray-100: #161616;
    
    --cyan-10: #e5f6ff;
    --cyan-20: #bae6ff;
    --cyan-30: #82cfff;
    --cyan-40: #33b1ff;
    --cyan-50: #1192e8;
    --cyan-60: #0072c3;
    --cyan-70: #00539a;
    --cyan-80: #003a6d;
    --cyan-90: #012749;
    --cyan-100: #061727;
    
    --bg-white: var(--white);
    --bg-gray: var(--gray-10);
    --bg-black: var(--black);
    
    --bg-light-primary: var(--white);
    --bg-light-secondary: var(--gray-10);
    --bg-dark-primary: var(--black);
    --bg-dark-secondary: var(--gray-100);
    
    --bg-dynamic-primary: var(--white);
    --bg-dynamic-secondary: var(--gray-10);
    --bg-dynamic-cta-cyan: var(--cyan-50);
    
    --bg-dynamic-primary-hover: var(--gray-20);
    --bg-dynamic-secondary-hover: var(--gray-30);
    --bg-dynamic-cta-cyan-hover: var(--cyan-60);
    
    --bg-dynamic-primary-reversed: var(--gray-100);
    --bg-dynamic-secondary-reversed: var(--gray-90);
    --bg-dynamic-tertiary-reversed: var(--gray-80);
    
    --bg-dynamic-reversed-layer: #1616160d;
    
    --bg-dynamic-local-nav-bar-primary: #F4F4F4CC;
    
    --bg-accordion-filled-primary: var(--white);
    --bg-accordion-filled-secondary: var(--gray-20);
    
    --bg-accordion-filled-primary-hover: var(--gray-20);
    --bg-accordion-filled-secondary-hover: var(--gray-30);
    --bg-accordion-bordered-hover: var(--gray-20);
    --bg-accordion-lined-hover: var(--gray-20);
    
    --bg-segmented-control-filled-primary: var(--gray-20);
    --bg-segmented-control-button-activated: var(--white);
    --bg-segmented-control-button-hover: var(--gray-30);
    
    --bg-table-header: var(--gray-20);
    
    --fill-gray-20: var(--gray-20);
    --fill-gray-30: var(--gray-30);
    --fill-gray-50: var(--gray-50);
    --fill-gray-60: var(--gray-60);
    
    --border-local-nav-bar-menu-selected: var(--black);
    --border-local-nav-bar-menu-hover: var(--gray-40);
    --border-local-nav-bar-menu-boder-bottom: var(--gray-20);
    --border-button-unselected: var(--gray-20);
    --border-button-group-separator: var(--gray-30);
    --border-portfolio-home-value-top: var(--gray-20);
    --border-info-plate-separator: var(--gray-80);
    --border-section-top: var(--gray-50);
    --border-group-left: var(--gray-50);
    --border-group-top: var(--gray-30);
    --border-side-title: var(--gray-50);
    --border-link-wrapper-outline: var(--gray-100);
    --border-accordion: var(--gray-30);
    --border-table-td-border: var(--gray-30);
    --border-table-td-border-secondary: var(--gray-20);
    --border-on-bg-dynamic-secondary: var(--gray-20);
    --border-card-edge-dynamic-secondary: var(--gray-20);
    
    --text-color-primary: var(--gray-100);
    --text-color-secondary: var(--gray-70);
    --text-color-tertiary: var(--gray-50);
    --text-color-primary-reversed: var(--gray-10);
    --text-color-cta-reversed: var(--white);
}

.post-content .pattern-portfolio-section-title-col-4-content-col-12 {
    --section-spacing-top: var(--section-top-border-spacing-top);
}

@media only screen and ( max-width: 1024px ) {
    :root {
        --grid-gap: var(--grid-gap-medium);
    }
}

@media only screen and ( max-width: 576px ) {
    :root {
        --grid-gap: var(--grid-gap-small);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-dynamic-primary: var(--black);
        --bg-dynamic-secondary: var(--gray-100);
        
        --bg-dynamic-primary-hover: var(--gray-90);
        --bg-dynamic-secondary-hover: var(--gray-80);
        --bg-dynamic-cta-cyan-hover: var(--cyan-40);
        
        --bg-dynamic-primary-reversed: var(--white);
        --bg-dynamic-secondary-reversed: var(--gray-10);
        --bg-dynamic-tertiary-reversed: var(--gray-20);
        
        --bg-dynamic-reversed-layer: #f4f4f417;
        
        --bg-dynamic-local-nav-bar-primary: #161616CC;
        
        --bg-accordion-filled-primary: var(--black);
        --bg-accordion-filled-secondary: var(--gray-90);
        
        --bg-accordion-filled-primary-hover: var(--gray-90);
        --bg-accordion-filled-secondary-hover: var(--gray-80);
        --bg-accordion-bordered-hover: var(--gray-90);
        --bg-accordion-lined-hover: var(--gray-90);
        
        --bg-segmented-control-filled-primary: var(--black);
        --bg-segmented-control-button-activated: var(--gray-80);
        --bg-segmented-control-button-hover: var(--gray-90);
        
        --bg-table-header: var(--gray-90);
        
        --fill-gray-20: var(--gray-90);
        --fill-gray-30: var(--gray-80);
        --fill-gray-60: var(--gray-40);
        
        --border-local-nav-bar-menu-selected: var(--gray-20);
        --border-local-nav-bar-menu-hover: var(--gray-70);
        --border-local-nav-bar-menu-boder-bottom: var(--gray-80);
        --border-button-unselected: var(--gray-80);
        --border-button-group-separator: var(--gray-70);
        --border-portfolio-home-value-top: var(--gray-90);
        --border-section-top: var(--gray-70);
        --border-group-left: var(--gray-70);
        --border-group-top: var(--gray-80);
        --border-side-title: var(--gray-70);
        --border-link-wrapper-outline: var(--gray-10);
        --border-accordion: var(--gray-80);
        --border-table-td-border: var(--gray-80);
        --border-table-td-border-secondary: var(--gray-90);
        --border-on-bg-dynamic-secondary: var(--gray-90);
        --border-card-edge-dynamic-secondary: var(--gray-90);
        
        --text-color-primary: var(--gray-10);
        --text-color-secondary: var(--gray-30);
        --text-color-primary-reversed: var(--gray-100);
    }
}