layout-sidebar.pcss.css

/**
 * @file
 * Special grid system for sidebar.
 */

@import "../base/media-queries.pcss.css";

.sidebar-grid {
  & > .site-main {
    grid-column: 1 / 7;
    align-self: flex-start;

    @media (--grid-md) {
      grid-column: 1 / 15;
    }

    @media (--lg) {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      grid-column: 3 / 11;

      & > .region--content-above,
      & > .region--content {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-column: 1 / 9;
      }

      & .layout--content-narrow,
      & .layout--pass--content-narrow > *,
      & .layout--content-medium,
      & .layout--pass--content-medium > * {
        grid-column: 1 / 9;
      }
    }
  }

  & .region--sidebar {
    grid-column: 1 / 7;

    @media (--grid-md) {
      grid-column: 3 / 13;
    }

    @media (--lg) {
      grid-column: 12 / 15;
    }
  }
}