@layer sfx.components { :root {
--sfx-cg-gutter:      var(--cg-gutter, var(--container-padding-inline, var(--container-padding-horizontal, 1.5rem)));
--sfx-cg-content:     var(--cg-content, var(--max-screen-width, 1400px)); --sfx-cg-feature:     var(--cg-feature, 2100px);
--sfx-cg-feature-max: var(--cg-feature-max, 2450px);
--sfx-cg-gap:         var(--cg-gap, var(--grid-gap, var(--space-m, 1.5rem)));
} .content-grid {
display: grid;
row-gap: var(--sfx-cg-gap);
grid-template-columns:
[full-start] minmax(var(--sfx-cg-gutter), 1fr)
[content-start feature-start feature-max-start] minmax(0, calc(var(--sfx-cg-content) - 2 * var(--sfx-cg-gutter))) [content-end feature-end feature-max-end]
minmax(var(--sfx-cg-gutter), 1fr) [full-end];
}
.content-grid > * {
grid-column: content-start / content-end;
}
.content--feature,
.content--feature-max {
grid-column: content-start / content-end;
}
.content--full {
grid-column: full-start / full-end;
}
.content--full-safe {
grid-column: full-start / full-end;
padding-inline: var(--sfx-cg-gutter);
}
.content--full-safe > .inner {
max-width: calc(var(--sfx-cg-content) - 2 * var(--sfx-cg-gutter));
margin-inline: auto;
}
.content--full-safe > .inner--feature {
max-width: calc(var(--sfx-cg-feature) - 2 * var(--sfx-cg-gutter));
margin-inline: auto;
}
.content--full-safe > .inner--feature-max {
max-width: calc(var(--sfx-cg-feature-max) - 2 * var(--sfx-cg-gutter));
margin-inline: auto;
} [class*="content--split-"] {
--sfx-cg-split: var(--cg-split, 0.5);
grid-column: content-start / content-end;
display: grid;
grid-template-columns: 1fr;
gap: var(--sfx-cg-gap);
} .content--split-30-breakout { --sfx-cg-split: var(--cg-split, 0.3); }
.content--split-40-breakout { --sfx-cg-split: var(--cg-split, 0.4); }
.content--split-60-breakout { --sfx-cg-split: var(--cg-split, 0.6); }
.content--split-70-breakout { --sfx-cg-split: var(--cg-split, 0.7); }
@media (min-width: 768px) {
.content--split-md {
grid-column: content-start / full-end;
grid-template-columns:
minmax(0, calc((min(100vw, var(--sfx-cg-content)) - 2 * var(--sfx-cg-gutter) - var(--sfx-cg-gap)) * var(--sfx-cg-split)))
minmax(0, 1fr);
}
}
@media (min-width: 1024px) {
[class*="content--split-"] {
grid-column: content-start / full-end;
grid-template-columns:
minmax(0, calc((min(100vw, var(--sfx-cg-content)) - 2 * var(--sfx-cg-gutter) - var(--sfx-cg-gap)) * var(--sfx-cg-split)))
minmax(0, 1fr);
}
} @media (min-width: 768px) {
.content--split-md.reverse {
grid-column: full-start / content-end;
direction: rtl;
}
.content--split-md.reverse > * {
direction: ltr;
}
}
@media (min-width: 1024px) {
[class*="content--split-"].reverse {
grid-column: full-start / content-end;
direction: rtl;
}
[class*="content--split-"].reverse > * {
direction: ltr;
}
} @media (min-width: 2100px) {
.content-grid {
grid-template-columns:
[full-start] minmax(var(--sfx-cg-gutter), 1fr)
[feature-start feature-max-start] minmax(0, calc((var(--sfx-cg-feature) - var(--sfx-cg-content)) / 2))
[content-start] minmax(0, calc(var(--sfx-cg-content) - 2 * var(--sfx-cg-gutter))) [content-end]
minmax(0, calc((var(--sfx-cg-feature) - var(--sfx-cg-content)) / 2)) [feature-end feature-max-end]
minmax(var(--sfx-cg-gutter), 1fr) [full-end];
}
.content--feature {
grid-column: feature-start / feature-end;
}
} @media (min-width: 2450px) {
.content-grid {
grid-template-columns:
[full-start] minmax(var(--sfx-cg-gutter), 1fr)
[feature-max-start] minmax(0, calc((var(--sfx-cg-feature-max) - var(--sfx-cg-feature)) / 2))
[feature-start] minmax(0, calc((var(--sfx-cg-feature) - var(--sfx-cg-content)) / 2))
[content-start] minmax(0, calc(var(--sfx-cg-content) - 2 * var(--sfx-cg-gutter))) [content-end]
minmax(0, calc((var(--sfx-cg-feature) - var(--sfx-cg-content)) / 2)) [feature-end]
minmax(0, calc((var(--sfx-cg-feature-max) - var(--sfx-cg-feature)) / 2)) [feature-max-end]
minmax(var(--sfx-cg-gutter), 1fr) [full-end];
}
.content--feature-max {
grid-column: feature-max-start / feature-max-end;
}
}
}