/** Base */
.page-grid {
  display: grid;
  grid-template-columns: var(--grid-fullsize);
  grid-template-rows: var(--grid-row) auto var(--grid-row);
  min-height: 100vh;
}

.page-content {
  display: grid;
  grid-auto-rows: auto;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-template-columns: var(--grid-fullsize);
  grid-template-rows: var(--grid-row);
  margin-block-end: var(--grid-row);
  row-gap: clamp(1.5rem, var(--space-55), 6rem);
}

.page-title {
  align-items: center;
  display: flex;
  font-size: var(--font-size-4);
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  justify-content: flex-end;
  margin: 0;
  padding-inline-end: calc(var(--space-55) / 2);
  transform: rotate(180deg);
  writing-mode: vertical-lr;
}

@media (--tablet) {
  .page-title {
    grid-column: 1;
  }
}

.page-title-link {
  font-weight: var(--font-weight-black);
  text-decoration: none;
}

.svg-icons {
  left: -9999px;
  position: absolute;
  top: -9999px;
}

/** Narrow */
.layout-narrow {
  grid-column: 3 / -3;
  grid-row: 1 / 3;
  padding-block-start: calc(var(--space-55) / 2);
}

@media (--tablet) {
  .layout-narrow {
    grid-column: 6 / -6;
  }
}

@media (--desktop) {
  .layout-narrow {
    grid-column: 7 / -7;
  }
}