/**
* Page shell + content width + responsive two-column grid.
* Aligned with Figma: Desktop - 5 (node 1:95) — content 1200px, ~120px page inset at 1440.
* https://www.figma.com/design/hdDlT8QoplKHpXNgtWAeVo/website?node-id=1-95
*
* Usage:
*
*
*
*
*
*
*
*
* Requires tokens.css first (optional; layout works without it).
*/
:root {
--layout-max-width: 1200px;
/* Figma Works row: gap 32px between two 584px cards */
--layout-grid-gap: 32px;
/* Page inset: scales down on narrow viewports, caps ~120px like 1440 artboard */
--layout-page-inline: clamp(1.5rem, 8vw, 7.5rem);
}
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
/* Full-bleed regions (no max-width) */
.layout__header,
.layout__footer {
width: 100%;
flex-shrink: 0;
box-sizing: border-box;
}
.layout__main {
flex: 1 0 auto;
width: 100%;
box-sizing: border-box;
}
/* Horizontal inset for main content only; keeps max 1200 column centered when wide */
.layout__main-inner {
width: 100%;
box-sizing: border-box;
padding-inline: var(--layout-page-inline);
}
.layout__container {
width: 100%;
max-width: var(--layout-max-width);
margin-inline: auto;
box-sizing: border-box;
}
/* Below “compact” widths, clamp(…8vw…) hits ~64px at ~800px — force 16px gutter */
@media (max-width: 1023px) {
.layout__main-inner {
padding-inline: var(--layout-page-inline-mobile, 16px);
}
}
/* Two columns (e.g. project cards); stacks to one column on small screens */
.layout__grid-2 {
display: grid;
grid-template-columns: 1fr;
gap: var(--layout-grid-gap);
width: 100%;
box-sizing: border-box;
}
@media (min-width: 768px) {
.layout__grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}