@media screen and (min-width: 600px) {
  @supports (display: grid) {
    .configurationsPage {
      grid-area: ct;
      display: grid;
      grid-column-gap: 18px;
      grid-row-gap: 20px;
      grid-template-columns: repeat(12, minmax(auto, 100px));
      grid-template-areas: '. . . hero hero hero hero hero hero . . .' '. . . progress progress progress progress progress progress . . .' 'confs confs confs confs confs confs confs confs confs confs confs confs'; }
    .configurationPage--1 {
      grid-area: confs;
      display: grid;
      grid-column-gap: 18px;
      grid-row-gap: 20px;
      grid-template-columns: repeat(12, minmax(auto, 100px));
      grid-template-areas: '. . . . .  form form . . . . .'; }
    .configurationPage--2 {
      grid-area: confs;
      display: grid;
      grid-column-gap: 18px;
      grid-row-gap: 20px;
      grid-template-columns: repeat(12, minmax(auto, 100px));
      grid-template-areas: 'tree tree tree tree tree tree tree tree tree tree tree tree'; } }
  .settingsForm {
    grid-area: form; }
  .configurationTree {
    grid-area: tree;
    overflow-x: auto;
    overflow-y: hidden; }
  .configurationPanel {
    grid-area: panel;
    position: relative; }
  .stepNavigation {
    grid-area: nav; }
  .progressBar {
    grid-area: progress; }
  .interactions {
    position: fixed; }
  .hero {
    grid-area: hero; } }