.steuergerät {
  grid-gap: 0.5em;
  grid-template-columns: 50% 50%;
  grid-template-areas: "title title"
                       "text text"
                       "key key"
                       "detail1 detail2"
                       "detail3 detail4";
}

@media screen and (min-aspect-ratio: 1/1) and (min-height: 22em) {
  .steuergerät {
    grid-template-columns: 18.75em 1fr 1fr 1fr;
    grid-template-rows: calc((100vh - 3em) / 3) calc((100vh - 3em) / 3) calc((100vh - 3em) / 3);
    grid-template-areas: "title detail1 key key"
                         "text detail2 key key"
                         "text detail3 detail4 braun";
  }
}

@media screen and (min-aspect-ratio: 8/5) and (min-height: 36em) {
  .steuergerät {
    grid-template-columns: 17.5em 1fr 3fr 1fr 1fr;
    grid-template-rows: calc((100vh - 3em) / 3) calc((100vh - 3em) / 3) calc((100vh - 3em) / 3);
    grid-template-areas: "title . key . ."
                         "text detail1 key detail2 detail3"
                         "text . . detail4 .";
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(9, 1.25em);
  grid-template-rows: repeat(6, 1.25em);
}

h2 {
  grid-row: 3 / 5;
  grid-column: 1 / 10;
}

.container::before {
  grid-row: 1 / 7;
  grid-column: 1 / 7;
}

.container::after {
  grid-row: 1 / 7;
  grid-column: 4 / 10;
}

header::before {
  content: 'This example requires a browser that supports CSS Flexbox or Grid. If your browser did support CSS Grid, you would have seen something that resembles the image below, except recreated in HTML and CSS instead.';
  display: inline-block;
  background-color: rgba(253, 182, 182, 0.75);
  font-size: initial;
  max-width: 36em;
  color: #000;
  padding: 0.5em;
}

header > * {
  display: none;
}

header {
  background-color: $background;
  background-image: url('./fallback.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  overflow: hidden;
  max-height: 60vh;
  position: relative;
}

@supports (display: flex) {
  header::before {
    content: none;
  }

  header {
    background-image: none;
  }

  .grid {
    display: block;
  }

  .title {
    color: $txt-light;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 2.5em;
    z-index: 1;
    padding-right: 0.25em;
  }

  .time {
    color: $txt-dark;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5em;
  }

  .grid__item:nth-of-type(1) {
    background-color: $blue;
    width: 30vw;
  }

  .grid__item:nth-of-type(2) {
    background-color: $purple;
    width: 45vw;
  }

  .grid__item:nth-of-type(3) {
    background-color: $yellow;
    width: 60vw;
    position: relative;
    z-index: 2;
  }

  .time {
    width: calc(100% / 9);
    float: left;
    padding: 1em;
  }

  .time:nth-child(8) {
    position: relative;

    &::before {
      display: block;
      content: '';
      height: 3.5em;
      width: 3.5em;
      border-radius: 50%;
      position: absolute;
      border: 0.2em solid $blue;
      z-index: 1;
    }
  }

  .border {
    width: 0.2em;
    background-color: $red;
    position: absolute;
    top: 0;
    height: 100%;
    left: calc((100% / 9) * 7);
  }
}

@supports (display:grid) {
  .time {
    grid-row: 7;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows:  repeat(3, 2em) repeat(3, minmax(10vmin, 3em)) 2em 2em 10vh;
    grid-gap: 0.125em;
    position: relative;
  }

  @media screen and (min-width: 480px) {
    .grid {
      transform: rotate(-30deg) translateX(5vh);
      grid-template-rows:  repeat(3, 2em) repeat(3, minmax(10vmin, 3em)) 2em 2em 50vh;
    }
  }

  @media screen and (min-width: 640px) {
    .grid {
      transform: rotate(-30deg) translateY(-15vh);
    }
  }

  .grid__item:nth-of-type(1) {
    grid-row: 4;
    grid-column: span 3;
    width: auto;
  }

  .grid__item:nth-of-type(2) {
    grid-row: 5;
    grid-column: span 5;
    width: auto;
  }

  .grid__item:nth-of-type(3) {
    grid-row: 6;
    grid-column: span 7;
    width: auto;
  }

  .border {
    grid-row: 1 / -1;
    grid-column: 8;
    margin-left: -0.125em;
    width: 1px;
    border-left: 0.2em solid $red;
    left: initial;
  }

  .square1 {
    grid-column: 2;
    position: relative;
    
    &::before {
      display: block;
      content: '';
      height: 1.25em;
      width: 1.25em;
      border: 0.2em solid $purple;
      position: absolute;
      right: 0;
    }
  }

  .square2 {
    grid-column: 3;
    grid-row: 2;
    position: relative;

    &::before {
      display: block;
      content: '';
      height: 0.5em;
      width: 0.5em;
      background-color: $green;
      position: absolute;
      right: 1em;
      top: 1em;
    }
  }

  .circle {
    grid-column: 2;
    grid-row: 3;
    position: relative;
    
    &::before {
      display: block;
      content: '';
      border: 0.2em solid $yellow;
      border-radius: 50%;
      position: absolute;
      height: 4em;
      width: 4em;
      top: calc(50% -  0.5em);
      left: calc(50% - 2em);
    }
  }

  .square3 {
    grid-column: 8;
    grid-row: 6;
    position: relative;

    &::before {
      display: block;
      content: '';
      height: 0.75em;
      width: 0.75em;
      background-color: $yellow;
      position: absolute;
      right: 0;
      top: 1em;
    }
  }

  .square4 {
    grid-column: 6;
    grid-row: 8;
    position: relative;

    &::before {
      display: block;
      content: '';
      height: 1.5em;
      width: 1.5em;
      position: absolute;
      right: 0;
      top: 100%;
      border: 0.2em solid $green;
    }
  }
}