@block layout-sidebar {
  padding: 0 2vw;
  max-width: var(--content-max-width);
  margin: 0 auto;

  @media (--breakpoint-desktop) {
    display: flex;
    align-items: flex-start;
  }

  @element sidebar {
    @media (--breakpoint-desktop) {
      flex: 0 0 auto;
      width: var(--layout-sidebar-sidebar-width);
      border-radius: var(--border-radius);
      box-shadow: var(--card-box-shadow);
    }
  }

  @element sidebar-header {
    padding: calc(var(--grid-gutter) / 2) var(--grid-gutter);
    border-bottom: 1px solid var(--color-sidebar-seperator);
  }

  @element sidebar-title {
    font-family: var(--font-medium);
    font-size: 1.25em;
    font-weight: normal;
    margin: 0;
  }

  @element sidebar-content {
    background: var(--color-sidebar-bg);
    padding: var(--grid-gutter);
  }

  @element content {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    padding-top: calc(var(--grid-gutter) / 2);

    @media (--breakpoint-desktop) {
      flex: 0 1 auto;
      width: var(--layout-sidebar-content-width);
      margin-left: var(--grid-gutter);
    }

    & > * {
      max-width: var(--layout-sidebar-content-width);
    }
  }
}