* {
margin: 0;
padding: 0;
}
#hover-image {
    position: absolute;
    width: 250px;
    height: 250px;
    display: none;
    pointer-events: none;
}

.trail-image{
    position: absolute;
    width: 150px;
    height: 150px;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

.grid{
    height: 100vh;
    display: grid;
    grid-template-rows: 1fr 1fr;
    max-height: 100vh;
}
.gridoben{
    height: 50vh;
    display: grid;
    grid-template-columns: 1fr 2fr 2.5fr 8.5fr 2.5fr 2fr 5.5fr 1fr;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out; 
}
.gridunten{
    height: 50vh;
    display: grid;
    grid-template-columns: 1fr 2fr 2.5fr 8.5fr 2.5fr 2fr 5.5fr 1fr;
    transition: all 300ms ease-in-out;
}

.box{
    border: 2px solid rgb(0, 0, 0); 
    overflow: hidden;

}
.box img{
height: 100%;
width: 100%;
object-fit: fill;
}
svg {
    width: 100%;
    height: 101%;    
    }

.hide{
display: none;
}

.gridoben:has(.first:hover){
    grid-template-columns: 6fr 0.5fr 1fr 2fr 1fr 0.5fr 1.5fr 0.5fr;
    background-color: rgb(0, 255, 42);
}

.gridoben:has(.second:hover){
    grid-template-columns: 0.5fr 6fr 1fr 2fr 1fr 0.5fr 1.5fr 0.5fr;
    background-color: rgb(0, 255, 42);
}

.gridoben:has(.third:hover){
    grid-template-columns:  0.5fr 0.5fr 6fr 2fr 1fr 0.5fr 1.5fr 0.5fr;
    background-color: rgb(0, 255, 42);
}
.gridoben:has(.fourth:hover){
    grid-template-columns:  0.5fr 0.5fr 1fr 6fr 1fr 0.5fr 1.5fr 0.5fr;
    background-color: rgb(0, 255, 42);
}
.gridoben:has(.fifth:hover){
    grid-template-columns:  0.5fr 0.5fr 1fr 2fr 6fr 0.5fr 1.5fr 0.5fr;
    background-color: rgb(0, 255, 42);
}
.gridoben:has(.sixth:hover){
    grid-template-columns:  0.5fr 0.5fr 1fr 2fr 1fr 6fr 1.5fr 0.5fr;
    background-color: rgb(0, 255, 42);
}
.gridoben:has(.seventh:hover){
    grid-template-columns:  0.5fr 0.5fr 1fr 2fr 1fr 0.5fr 6fr 0.5fr;
    background-color: rgb(0, 255, 42);
}
.gridoben:has(.eigth:hover){
    grid-template-columns:  0.5fr 0.5fr 1fr 2fr 1fr 0.5fr 1.5fr 6fr;
    background-color: rgb(0, 255, 42);
}

.gridunten:has(.first:hover){
    grid-template-columns: 6fr 0.5fr 1fr 2fr 1fr 0.5fr 1.5fr 0.5fr;
    background-color: rgb(255, 0, 191);
}

.gridunten:has(.second:hover){
    grid-template-columns: 0.5fr 6fr 1fr 2fr 1fr 0.5fr 1.5fr 0.5fr;
    background-color: rgb(255, 0, 191);
}

.gridunten:has(.third:hover){
    grid-template-columns:  0.5fr 0.5fr 6fr 2fr 1fr 0.5fr 1.5fr 0.5fr;
    background-color: rgb(255, 0, 191);
}
.gridunten:has(.fourth:hover){
    grid-template-columns:  0.5fr 0.5fr 1fr 6fr 1fr 0.5fr 1.5fr 0.5fr;
    background-color: rgb(255, 0, 191);
}
.gridunten:has(.fifth:hover){
    grid-template-columns:  0.5fr 0.5fr 1fr 2fr 6fr 0.5fr 1.5fr 0.5fr;
    background-color: rgb(255, 0, 191);
}
.gridunten:has(.sixth:hover){
    grid-template-columns:  0.5fr 0.5fr 1fr 2fr 1fr 6fr 1.5fr 0.5fr;
    background-color: rgb(255, 0, 191);
}
.gridunten:has(.seventh:hover){
    grid-template-columns:  0.5fr 0.5fr 1fr 2fr 1fr 0.5fr 6fr 0.5fr;
    background-color: rgb(255, 0, 191);
}
.gridunten:has(.eigth:hover){
    grid-template-columns:  0.5fr 0.5fr 1fr 2fr 1fr 0.5fr 1.5fr 6fr;
    background-color: rgb(255, 0, 191);
}

.grid:has(.gridoben:hover){
    grid-template-rows: 5fr 1fr;
    /*background: yellowgreen;*/
}

.grid:has(.gridunten:hover){
    grid-template-rows: 1fr 5fr;
    /*background-color: blue;*/
}

@media screen and (max-width: 1180px) {
    .grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-height: 100vh;
        transition: all 200ms ease-in-out;
    }
    
    .hide{
        display: grid;
    }

    .gridoben, .gridunten {
        display: none; 
    }
    
    .gridlinks, .gridrechts{
        height: 100vh;
        width: 50vw;
        transition-property: all;
        transition-duration: 300ms;
        transition-timing-function: ease-in-out; 
        grid-template-rows: 1fr 2fr 2.5fr 8.5fr 2.5fr 2fr 5.5fr 1fr;
    }

    .gridlinks:has(.first:hover),
    .gridrechts:has(.first:hover){
        grid-template-rows: 6fr 0.5fr 1fr 2fr 1fr 0.5fr 1.5fr 0.5fr;
    }
    .gridlinks:has(.second:hover),
    .gridrechts:has(.second:hover){
        grid-template-rows: 0.5fr 6fr 1fr 2fr 1fr 0.5fr 1.5fr 0.5fr;
    }
    .gridlinks:has(.third:hover),
    .gridrechts:has(.third:hover){
        grid-template-rows:  0.5fr 0.5fr 6fr 2fr 1fr 0.5fr 1.5fr 0.5fr;
    }
    .gridlinks:has(.fourth:hover),
    .gridrechts:has(.fourth:hover){
        grid-template-rows:  0.5fr 0.5fr 1fr 6fr 1fr 0.5fr 1.5fr 0.5fr;
    }   
    .gridlinks:has(.fifth:hover),
    .gridrechts:has(.fifth:hover){
        grid-template-rows:  0.5fr 0.5fr 1fr 2fr 6fr 0.5fr 1.5fr 0.5fr;
    }
    .gridlinks:has(.sixth:hover),
    .gridrechts:has(.sixth:hover){
        grid-template-rows:  0.5fr 0.5fr 1fr 2fr 1fr 6fr 1.5fr 0.5fr;
    }
    .gridlinks:has(.seventh:hover),
    .gridrechts:has(.seventh:hover){
        grid-template-rows:  0.5fr 0.5fr 1fr 2fr 1fr 0.5fr 6fr 0.5fr;
    }
    .gridlinks:has(.eigth:hover),
    .gridrechts:has(.eigth:hover){
        grid-template-rows:  0.5fr 0.5fr 1fr 2fr 1fr 0.5fr 1.5fr 6fr;
    }
}