.multiple-graph-page {
  display: flex;
  flex-direction: column;
  gap: var(--content-padding);
  padding: var(--content-padding);
}

.loading-title {
  max-width: 25ch;
}

.loading-spinner {
  width: 5rem;
  height: 5rem;
}

@media screen and (min-width: 1200px) {
  /* Columns */
  [data-layout="one_col"] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 100%;
    height: 100%;
  }

  [data-layout="two_col"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    height: 100%;
  }

  [data-layout="three_col"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    height: 100%;
  }

  [data-layout="four_col"] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    height: 100%;
  }

  /* Rows */
  [data-layout="one_row"] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    height: 100%;
  }

  [data-layout="two_rows"] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 100%;
  }

  /* Multiple Axes */
  [data-layout="two_col_two_row"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 100%);
    height: 100%;
  }

  [data-layout="small_big_rows"] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 20% 80% 100%;
    height: 100%;
  }

  [data-layout="buoys"] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 50%);
    /*height: 100%;*/
  }
}