/* Layout */

.Layout {
  display: grid;

  --Layout-sidebar-width: 220px;
  --Layout-gutter: 16px;
}

@media (max-width: calc(544px - 0.02px)) {

.Layout {
    grid-template-columns: 1fr !important;
}

.Layout {
    grid-auto-flow: row;
}
    .Layout .Layout-sidebar,
  .Layout .Layout-divider,
  .Layout .Layout-main {
    width: 100% !important;
    grid-column: 1 !important;
  }
    .Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
      grid-row: 1;
    }

    .Layout.Layout--sidebarPosition-flowRow-start .Layout-main {
      grid-row: 2 / span 2;
    }
    .Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
      grid-row: 2 / span 2;
    }

    .Layout.Layout--sidebarPosition-flowRow-end .Layout-main {
      grid-row: 1;
    }
    .Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
      display: none;
    }
    .Layout.Layout--divided {
    --Layout-gutter: 0;
  }
    .Layout.Layout--divided .Layout-divider {
    height: 1px;
    grid-row: 2;
  }

    .Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
      display: none;
    }

    .Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
      height: 8px;
      margin-right: 0;
      background: var(--color-canvas-inset);
      border-color: var(--color-border-default);
      border-style: solid;
      border-width: var(--yattho-borderWidth-thin, 1px) 0;
    }

    .Layout.Layout--divided .Layout-main {
      grid-row: 3 / span 1;
    }
      .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
        grid-row: 3 / span 1;
      }

      .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
        grid-row: 1;
      }
  }

@media (max-width: calc(768px - 0.02px)) {

.Layout.Layout--flowRow-until-md {
      grid-template-columns: 1fr !important;
  }

.Layout.Layout--flowRow-until-md {
      grid-auto-flow: row;
  }
      .Layout.Layout--flowRow-until-md .Layout-sidebar,
  .Layout.Layout--flowRow-until-md .Layout-divider,
  .Layout.Layout--flowRow-until-md .Layout-main {
    width: 100% !important;
    grid-column: 1 !important;
  }
    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
      grid-row: 1;
    }

    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main {
      grid-row: 2 / span 2;
    }
    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
      grid-row: 2 / span 2;
    }

    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main {
      grid-row: 1;
    }
    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
      display: none;
    }
      .Layout.Layout--flowRow-until-md.Layout--divided {
    --Layout-gutter: 0;
  }
    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider {
    height: 1px;
    grid-row: 2;
  }

    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
      display: none;
    }

    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
      height: 8px;
      margin-right: 0;
      background: var(--color-canvas-inset);
      border-color: var(--color-border-default);
      border-style: solid;
      border-width: var(--yattho-borderWidth-thin, 1px) 0;
    }

    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-main {
      grid-row: 3 / span 1;
    }
      .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
        grid-row: 3 / span 1;
      }

      .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
        grid-row: 1;
      }
    }

@media (max-width: calc(1012px - 0.02px)) {

.Layout.Layout--flowRow-until-lg {
      grid-template-columns: 1fr !important;
  }

.Layout.Layout--flowRow-until-lg {
      grid-auto-flow: row;
  }
      .Layout.Layout--flowRow-until-lg .Layout-sidebar,
  .Layout.Layout--flowRow-until-lg .Layout-divider,
  .Layout.Layout--flowRow-until-lg .Layout-main {
    width: 100% !important;
    grid-column: 1 !important;
  }
    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
      grid-row: 1;
    }

    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main {
      grid-row: 2 / span 2;
    }
    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
      grid-row: 2 / span 2;
    }

    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main {
      grid-row: 1;
    }
    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
      display: none;
    }
      .Layout.Layout--flowRow-until-lg.Layout--divided {
    --Layout-gutter: 0;
  }
    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider {
    height: 1px;
    grid-row: 2;
  }

    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
      display: none;
    }

    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
      height: 8px;
      margin-right: 0;
      background: var(--color-canvas-inset);
      border-color: var(--color-border-default);
      border-style: solid;
      border-width: var(--yattho-borderWidth-thin, 1px) 0;
    }

    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main {
      grid-row: 3 / span 1;
    }
      .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
        grid-row: 3 / span 1;
      }

      .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
        grid-row: 1;
      }
    }

.Layout {

  /* Flow as column */

  grid-auto-flow: column;
  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */
  grid-gap: var(--Layout-gutter);
}

.Layout .Layout-sidebar {
    grid-column: 1;
  }

.Layout .Layout-divider {
    display: none;
  }

.Layout .Layout-main {
    grid-column: 2 / span 2;
  }

/* Gutter spacing */

@media (min-width: 1012px) {

.Layout {
    --Layout-gutter: 24px;
}
  }

.Layout.Layout--gutter-none {
    /* stylelint-disable-next-line length-zero-no-unit */
    --Layout-gutter: 0px; /* Neds px in value */
  }

.Layout.Layout--gutter-condensed {
    --Layout-gutter: 16px;
  }

@media (min-width: 1012px) {

.Layout.Layout--gutter-spacious {
      --Layout-gutter: 32px;
  }
    }

@media (min-width: 1280px) {

.Layout.Layout--gutter-spacious {
      --Layout-gutter: 40px;
  }
    }

/* Sidebar width */

@media (min-width: 544px) {

.Layout {
    --Layout-sidebar-width: 220px;
}
  }

@media (min-width: 768px) {

.Layout {
    --Layout-sidebar-width: 256px;
}
  }

@media (min-width: 1012px) {

.Layout {
    --Layout-sidebar-width: 296px;
}
  }

@media (min-width: 768px) {

.Layout.Layout--sidebar-narrow {
      --Layout-sidebar-width: 240px;
  }
    }

@media (min-width: 1012px) {

.Layout.Layout--sidebar-narrow {
      --Layout-sidebar-width: 256px;
  }
    }

@media (min-width: 1012px) {

.Layout.Layout--sidebar-wide {
      --Layout-sidebar-width: 320px;
  }
    }

@media (min-width: 1280px) {

.Layout.Layout--sidebar-wide {
      --Layout-sidebar-width: 336px;
  }
    }

/* Sidebar position */

.Layout.Layout--sidebarPosition-start .Layout-sidebar {
      grid-column: 1;
    }

.Layout.Layout--sidebarPosition-start .Layout-main {
      grid-column: 2 / span 2;
    }

.Layout.Layout--sidebarPosition-end {
    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
  }

.Layout.Layout--sidebarPosition-end .Layout-main {
      grid-column: 1;
    }

.Layout.Layout--sidebarPosition-end .Layout-sidebar {
      grid-column: 2 / span 2;
    }

/* Sidebar divider */

.Layout.Layout--divided .Layout-divider {
      display: block;
      grid-column: 2;
      width: 1px;
      margin-right: -1px;
      background: var(--color-border-default);
    }

.Layout.Layout--divided .Layout-main {
      grid-column: 3 / span 1;
    }

.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar {
        grid-column: 3 / span 1;
      }

.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main {
        grid-column: 1;
      }

.Layout-divider {
  display: none;
  width: 1px;
}

.Layout-sidebar {
  width: var(--Layout-sidebar-width);
}

.Layout-main {
  min-width: 0;

  /* Centered main column
  ** FIXME: right-aligned sidebar */
}

.Layout-main .Layout-main-centered-md,
  .Layout-main .Layout-main-centered-lg,
  .Layout-main .Layout-main-centered-xl {
    margin-right: auto;
    margin-left: auto;
  }

.Layout-main .Layout-main-centered-md > .container-md,
    .Layout-main .Layout-main-centered-lg > .container-md,
    .Layout-main .Layout-main-centered-xl > .container-md,
    .Layout-main .Layout-main-centered-md > .container-lg,
    .Layout-main .Layout-main-centered-lg > .container-lg,
    .Layout-main .Layout-main-centered-xl > .container-lg,
    .Layout-main .Layout-main-centered-md > .container-xl,
    .Layout-main .Layout-main-centered-lg > .container-xl,
    .Layout-main .Layout-main-centered-xl > .container-xl {
      margin-left: 0;
    }

.Layout-main .Layout-main-centered-md {
    max-width: calc(var(--yattho-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
  }

.Layout-main .Layout-main-centered-lg {
    max-width: calc(var(--yattho-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
  }

.Layout-main .Layout-main-centered-xl {
    max-width: calc(var(--yattho-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
  }