*{
    margin: 0;
    padding: 0;
}

.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100vh;
width: 100vw;
max-height: 100vh;
max-width: 100vw;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
}
 
.Spaltelinks{
display:grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
max-height: 100vh;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
}

.Spaltemitte{
    display: grid;
    grid-template-rows: 1fr 3fr 1fr 2fr 1fr 1fr;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease;
    max-height: 100vh;
}
.Spalterechts{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    max-height: 100vh;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease;
}
    

.Zeile{
border: 2px solid black;
overflow: hidden;
}

.Zeile img{
width: 100%;
height: auto;
object-fit: fill;
filter: brightness(50%);
transition: all 200ms ease-in-out;
}

.Zeile img:hover{
    filter: brightness(100%);
    transition-property: all;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}

.Spaltemitte:has(.Zeile.first:hover){
    grid-template-rows: 9fr 1fr 1fr 1fr 1fr 1fr;
}
.Spaltemitte:has(.Zeile.second:hover){
    grid-template-rows: 1fr 9fr 1fr 1fr 1fr 1fr;
}
.Spaltemitte:has(.Zeile.third:hover){
    grid-template-rows: 1fr 1fr 9fr 1fr 1fr 1fr;
}
.Spaltemitte:has(.Zeile.fourth:hover){
    grid-template-rows: 1fr 1fr 1fr 9fr 1fr 1fr;
}
.Spaltemitte:has(.Zeile.fifth:hover){
    grid-template-rows: 1fr 1fr 1fr 1fr 9fr 1fr;
}
.Spaltemitte:has(.Zeile.sixth:hover){
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 9fr;
}


.Spaltelinks:has(.Zeile.first:hover){
    grid-template-rows: 9fr 1fr 1fr 1fr 1fr 1fr;
}
.Spaltelinks:has(.Zeile.second:hover){
    grid-template-rows: 1fr 9fr 1fr 1fr 1fr 1fr;
}
.Spaltelinks:has(.Zeile.third:hover){
    grid-template-rows: 1fr 1fr 9fr 1fr 1fr 1fr;
}
.Spaltelinks:has(.Zeile.fourth:hover){
    grid-template-rows: 1fr 1fr 1fr 9fr 1fr 1fr;
}
.Spaltelinks:has(.Zeile.fifth:hover){
    grid-template-rows: 1fr 1fr 1fr 1fr 9fr 1fr;
}
.Spaltelinks:has(.Zeile.sixth:hover){
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 9fr;
}

.Spalterechts:has(.Zeile.first:hover){
    grid-template-rows: 9fr 1fr 1fr 1fr 1fr 1fr;
}
.Spalterechts:has(.Zeile.second:hover){
    grid-template-rows: 1fr 9fr 1fr 1fr 1fr 1fr;
}
.Spalterechts:has(.Zeile.third:hover){
    grid-template-rows: 1fr 1fr 9fr 1fr 1fr 1fr;
}
.Spalterechts:has(.Zeile.fourth:hover){
    grid-template-rows: 1fr 1fr 1fr 9fr 1fr 1fr;
}
.Spalterechts:has(.Zeile.fifth:hover){
    grid-template-rows: 1fr 1fr 1fr 1fr 9fr 1fr;
}
.Spalterechts:has(.Zeile.sixth:hover){
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 9fr;
}