/***********************
2. Layout
***********************/
html:root {
  --layout-margin: max(5vw, 24px);
}

html body{
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(0, var(--layout-margin)) 1fr minmax(0, var(--layout-margin));
  grid-template-rows: auto 1fr auto;
}

main {
  grid-column: 2;
}




.content{
  flex-grow: 999;
}



main > *{
  grid-column: 2;
  max-width: var(--contentsize);
  margin-right: auto;
  margin-left: auto;
}

.is-layout-constrained{
  display: grid;
  grid-template-columns: var(--layout-margin) 1fr var(--layout-margin);
}

.is-layout-constrained > *{
  grid-column: 2;
  width: 100%;
  max-width: var(--contentsize);
  margin-right: auto;
  margin-left: auto;
}

.alignwide{
  max-width: var(--alignwide);
}


.alignfull{
  margin-left: calc( -1 * var(--layout-margin));
  margin-right: calc( -1 * var(--layout-margin));
  max-width: unset;
}

/* Colocar todos los elementos directos de body a ancho completo excepto main en columna central */
body > * {
  grid-column: 1 / -1;
}
main, .site-main {
  grid-column: 2;
}

/* Sobrescribir ancho completo en escritorio para romper el max-width del contenedor main */
@media (min-width: 921px) {
  main > .alignfull {
    grid-column: 1 / -1;
    max-width: 100vw;
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}