portfolio/src/components/Layout.module.css

.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);
}