* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.parent {
  display: grid;
  grid-template-columns: min-content min-content repeat(4, 1fr);
  grid-template-rows: min-content repeat(5, 1fr);
  /* height: 100vh; */
  width: 100vw;
}

.header {
  grid-column: span 6 / span 6;
  margin: 1rem;
  display: flex;
  justify-content: space-between;
}

.flx {
  display: flex;
}

.flx-vert {
  flex-direction: column;
}

.bar-options {
  grid-column: span 2 / span 2;
  grid-row: span 5 / span 5;
  grid-row-start: 2;
  margin: 1rem;
}

.bar-grid {
  grid-column: span 4 / span 4;
  grid-row: span 5 / span 5;
  grid-column-start: 3;
  grid-row-start: 2;
  margin: 1rem;
  display: flex;
  /* justify-content: center; */
}

li {
  list-style: none;
}

.links {
  display: flex;
}

.links > li {
  margin: 0rem 1rem;
}

@media screen and (width <= 600px) {
  .parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: min-content repeat(5, 1fr);
    /* height: 100vh; */
    width: 100vw;
  }

  .header {
    grid-column: span 6 / span 6;
    margin: 1rem;
    display: flex;
    justify-content: space-between;
  }

  .bar-options {
    grid-column: span 6 / span 6;
    grid-row: span 2 / span 2;
    grid-row-start: 2;
  }

  .bar-grid {
    grid-column: span 6 / span 6;
    grid-row: span 3 / span 3;
    grid-row-start: 4;
  }
}

.options {
  margin: 1rem;
}