body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 128px 1fr 1fr 32px;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas: "header" "playlist" "db" "footer";
}

header {
  display: grid;
  grid-template-columns: 128px 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas: "config playback-controls playlist-controls track-info";
  grid-area: header;
}

div {
  border: dotted 1px;
}

section.playlist {
  grid-area: playlist;
}

header .config {
  grid-area: config;
}

header .playback-controls {
  grid-area: playback-controls;
}

header .playlist-controls {
  grid-area: playlist-controls;
}

header .track-info {
  grid-area: track-info;
}

footer {
  grid-area: footer;
}

section.db {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  grid-template-rows: 1fr;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas: "tabs result";
  grid-area: db;
}

.db .tabs {
  grid-area: tabs;
}

.db .result {
  grid-area: result;
}