.skin.root {
  --column-main: c3/c10;
  --column-sidebar: c11/c14;
  --after-left: c10;
  --before-right: c11;

  @media screen and (max-width: 1024px) {
    --column-main: c2/c3;
    --column-sidebar: c2/c3;
  }
}



.skin.extra {
  display: block;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  grid-row: before-extra / after-extra;
  grid-column: var(--before-left) / var(--after-left);
}



.skin.page::before {
  content: '';
  grid-column: var(--after-left) / var(--before-right);
  grid-row: before-lead / -1;
  background: url(/images/hash-grey.svg);
  
  width: 32px;
  justify-self: flex-end;
}


@media screen and (max-width: 1024px) {
  .skin.page::before {
    display: none;
  }
}