@import "_reset.css";

body {
    font-size: 1.8vw;
    font-family: Helvetica, sans-serif;
    background-color: white;

}

main {
    overflow: hidden;
    /* height: 100vh; */
    background-color: white;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: gray;
}

.div {
    display: inline;
}


.grid-container {
    display: inline-grid;
    /* grid-template-columns: auto min-content min-content min-content min-content min-content;  */
    grid-template-columns: repeat(6, minmax(0, auto));
    grid-template-rows: repeat(4, minmax(0, auto));
    width: fit-content;
    height: 100vh;
}

.grid-item#last {
    height: 0;
    transition: height 2s ease, width 2s ease;
}

.grid-item#last.sperr {
    height: 1000px !important;
    transition: height 2s ease, width 2s ease;
}


.grid-item {
    /* outline: 1px solid;   */
    font-size: 1em;
    text-align: left;
    cursor: pointer;
}

.grid-item p {
    display: none;
}

.grid-item.active p {
    display: block;
}

img {
    padding-top: 1em;
    padding-right: 0.1em;
    max-height: 0px;
    max-width: 0px;
    display: block;
    overflow: hidden;
    transition: all 2s ease;
}

img.active {
    max-width: 100%;
    max-height: 100%;
}

.uma {
    width: 11em;
    height: 1.07em;
    overflow: hidden;
    transition: height 0.3s ease, width 0.3s ease;
    cursor: pointer;
}

.uma p {
    display: block;
    width: 12em;
}

.uma.activex {
    display: all;
    width: 12em;
    height: 6em;
}

.kontakt {
    width: 3.8em;
    height: 1em;
    overflow: hidden;
    transition: height 0.3s ease, width 0.3s ease;
    cursor: pointer;
}

.kontakt p {
    display: block;
    width: 3.8em;
}

.kontakt.activex {
    display: all;
    height: 3.2em;
    width: 4.8em;
}

.mobile {
    position: absolute;
}

.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}



@media screen and (max-width: 900px) {
    .grid-container {
        display: inline-grid;
        /* grid-template-columns: repeat(4, auto); */
        grid-template-columns: repeat(4, minmax(0, auto));
        /* grid-template-rows: repeat(5, auto); */
        grid-template-rows: repeat(5, minmax(0, auto));
        height: 100vh;
        width: fit-content;

        
    }

    body {
        font-size: 16px;
        overflow: scroll;
        margin: 00em;
    }

    main {
        overflow: scroll;
    }
}


@media screen and (max-width: 500px) {
    body {
        font-size: 16px;
        overflow: scroll;
    }

    main {
        margin: 1em;
        overflow: scroll;
    }

    .grid-container {
        display: inline-grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: fit-content;
        width: auto;
        gap: 0.2em;
        height: auto;
    }

    img.active {
        width: max-content;
    }

    .empty {
        position: absolute;
    }
}