html, 
* { box-sizing: content-box;}

body { background-color: #52575F; }


.grid-container {
  margin: auto;
  border: solid 20px #000;
  display: grid;
  background-color: #000;
  max-width: 65%;
  grid-template-columns: 3fr 3fr 3fr 3fr;
  grid-template-rows: max-contents; 
  grid-template-areas:
    "titel titel titel titel"
    "foto foto aktuell aktuell"
    "foto foto aktuell aktuell"
    "deutsch english francais spanisch"; 
  justify-content: center;
  align-content: space-between;
  gap: 10px 30px;
  font-size: 16px;}

img { max-width: 100%; height: auto; object-fit: cover;}

p.index {text-align: left; font-family: Times, serif; font-size: 1.15em; line-height:115%; 
           color: #fff; margin: 0 15px 15px 15px; }
 
a { color: #fff; text-decoration: none;}

.item1 { grid-area: titel; }

.item3 {  grid-area: foto;  width: fit-content;  height: auto;  }

.item4 { grid-area: aktuell; background-color: #30353D; width:inherit; height: auto; padding: 15px;
        align-self: center;  justify-self: flex-start; color: #000; }

.item4 p.titel {text-align: left; font-family: Times, serif; font-size: 1.5em; font-weight: 220%; line-height:115%; 
           color: #fff; margin: 15px 15px 0 15px; }


.item5          { grid-area: deutsch;  }
.item5:hover   { padding: 2px;}

.item6          { grid-area: english;  }
.item6:hover   { padding: 2px;}

.item7          { grid-area: francais; }
.item7:hover   { padding: 2px;}

.item8          {grid-area: spanisch; }
.item8:hover   { padding: 2px;}

.item9         { grid-area: titel2; display: none;}



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

{ .grid-container {
  margin: auto;
  display: grid;
  background-color: #000;
  max-width: 80%;
  grid-template-rows: max-content; 
  } 
  
  .item9 {grid-area: 1 / span 9; display: grid; }
  .item1 {grid-area: 2 / span 6; display: none;}
  .item3 {grid-area: 3 / span 9;}
  .item4 {grid-area: 4 / span 9;}
  .item5 {grid-area: 5 / span 5; }
  .item6 {grid-area: 5 / span 4; }
  .item7 {grid-area: 6 / span 5; }
  .item8 {grid-area: 6 / span 4; }
  
}