html,
body,
.grid-container {
    height: 97%;
    margin: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: 300px 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 2fr 250px;
    gap: 0px 0px;
    grid-template-areas:
        "TTS-Options Stop-Playback Pause-Playback Profile"
        "TTS-Options Buttons-list Buttons-list Buttons-list"
        "MPU-1 Buttons-list Buttons-list Buttons-list";
}

.MPU-1 {
    grid-area: MPU-1;
}

.TTS-Options {
    grid-area: TTS-Options;
}

.Stop-Playback {
    grid-area: Stop-Playback;
}

.Pause-Playback {
    grid-area: Pause-Playback;
}

.Buttons-list {
    grid-area: Buttons-list;
}

.Profile {
    grid-area: Profile;
}


/* For presentation only, no need to copy the code below */
/*
.grid-container * {
  border: 1px solid red;
  position: relative;
}

.grid-container *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;
}
*/