:host {
  background-color: var(--wcs-semantic-color-background-surface-secondary);
  margin: 0;
  display: grid;
  grid-template-areas: "header header" "sidebar content";
  grid-template-columns: min-content auto;
  overflow-y: hidden;
}

::slotted(main) {
  padding: 8px;
  grid-area: content;
  overflow-y: scroll;
  height: calc(100vh - 64px);
}

::slotted(wcs-header) {
  grid-area: header;
}

@media screen and (max-width: 768px) {
  :host {
    grid-template-areas: "header" "sidebar" "content";
    grid-template-columns: auto;
  }
  ::slotted(header) {
    position: relative;
  }
  ::slotted(main) {
    overflow-y: visible;
    height: initial;
  }
}