app/FrontPageLayout.css

.front-page-container {
  display: grid;
  grid-template-columns:
    [left-edge] minmax(48px, 400px)
    [content-main] auto
    [right-pane] minmax(48px, 400px) [right-edge];
  grid-template-rows: [top] 50px [content-main] auto [bottom];
  gap: 1px 1px;
  grid-template-areas: ". . .";
}

.front-page-container.hide-left {
  grid-template-columns:
    [left-edge] 48px
    [content-main] auto
    [right-pane] minmax(48px, 400px) [right-edge];
  grid-template-rows: [top] 50px [content-main] auto [bottom];
}

.front-page-container.hide-right {
  display: grid;
  grid-template-columns:
    [left-edge] minmax(48px, 400px)
    [content-main] auto
    [right-pane] 48px [right-edge];
  grid-template-rows: [top] 50px [content-main] auto [bottom];
  gap: 1px 1px;
  grid-template-areas: ". . .";
}

.front-page-container.hide-both {
  grid-template-columns:
    [left-edge] 48px
    [content-main] auto
    [right-pane] 48px [right-edge];
  grid-template-rows: [top] 50px [content-main] auto [bottom];
}

.form-container {
  grid-column-start: left-edge;
  grid-column-end: content-main;
  grid-row-start: top;
  grid-row-end: bottom;
}

.status-container {
  grid-column-start: content-main;
  grid-column-end: right-pane;
  grid-row-start: top;
  grid-row-end: content-main;
}
.results-container {
  grid-column-start: content-main;
  grid-column-end: right-pane;
  grid-row-start: content-main;
  grid-row-end: bottom;
  overflow: hidden;
}

.facets-container {
  grid-column-start: right-pane;
  grid-column-end: right-edge;
  grid-row-start: top;
  grid-row-end: bottom;
}

ul.hidden-list {
  list-style: none;
  margin-top: 0;
  padding-left: 0.2em;
  padding-right: 0.2em;
}

li.hidden-list {
  margin-bottom: 0.8em;
}