.grid-container {
    display: grid;
    /*gap: 10px;*/
    /*background-color: #2196F3;*/
    padding: 0px;
  }

  .grid-container > div {
    /*background-color: rgba(255, 255, 255, 0.8);*/
    padding: 0px;
  }

  .title {
    grid-template-rows: auto;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding: 0px;
    margin: 20px 0px 20px 0px;
  }

  .training {
    display: grid;
  }

  .data {
  }

  .timetable {
    text-align: right;
    font-weight: bold;
    /*align-content: start;*/
    line-height: 125%;
  }

  .informations {
    text-align: left;
    font-weight: normal;
    */align-content: start;*/
    line-height: 125%;
  }

@media only screen and (max-width: 600px) {

  .grid-container {
    grid-template-columns: 1fr 98fr 1fr;
    grid-template-rows: auto repeat(5, auto auto 30px);
  }

  .title {
    grid-column: 2;
  }

  .training {
    grid-template-columns: 98fr;
    grid-template-rows: auto auto 30px;
    grid-column: 2;
    grid-row: span 3;
  }

  .data {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0px;
  }

  .picture {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  .picture img {
    width: 100%;
    height: 100%;
  }

  .timetable {
    font-size: 24px;
    width: 100%;
  }

  .informations {
    font-size: 16px;
    width: 100%;
  }
}

@media only screen and (min-width: 601px) and (max-width: 1074px) {

  .grid-container {
    grid-template-columns: auto 512px auto;
    grid-template-rows: auto repeat(5, auto auto 30px);
  }

  .title {
    grid-column: 1 / span 3;
  }

  .training {
    grid-template-columns: 512px;
    grid-template-rows: auto auto 30px;
    grid-column: 2;
    grid-row: span 3;
  }

  .data {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0px;
  }

  .picture {
    grid-column: 1;
    grid-row: 2;
  }

  .timetable {
    font-size: 24px;
  }

  .informations {
    font-size: 20px;
  }
}

@media only screen and (min-width: 1075px) {

  .grid-container {
    grid-template-columns: auto 512px 512px auto;
    grid-template-rows: auto repeat(5, auto 30px);
  }

  .title {
    grid-column: 1 / span 4;
  }

  .training {
    grid-template-columns: 512px 512px;
    grid-template-rows: auto 30px;
    grid-column: 2 / span 2;
    grid-row: span 2;
  }

  .data {
    grid-column: 2;
    grid-row: 1;
    padding-left: 20px;
  }

  .picture {
    grid-column: 1;
    grid-row: 1;
  }

  .timetable {
    font-size: 24px;
  }

  .informations {
    font-size: 18px;
  }
}