.screen { margin: calc(var(--spacer) * var(--line-height)) auto 0 auto; padding-left: 5vw; padding-right: 5vw; } @media (min-width: 55rem) { .screen { max-width: calc(var(--projectImageMaxWidth) + 10vw); } } /* Single Project Page */ .screen > article { display: grid; grid-template-columns: [full-start] minmax(calc(var(--spacer) / 2), 1fr) [main-start] minmax(0, 38rem) [main-end] minmax(calc(var(--spacer) / 2), 1fr) [full-end]; } .screen > article > * { grid-column: main; } /* Projects Grid */ .grid { display: grid; gap: calc(var(--spacer) * 2); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } @media (min-width: 55rem) { .grid { gap: calc(var(--spacer) * 3); grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); } } .fullContainer { grid-column: full !important; } .fullWidth { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }