.guestIntro,
.infoBoxes{
    --contentPadding: 0.5em;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    width: 100%;
    padding: var(--contentPadding);
    gap: 0.5em;
    overflow: auto;
    padding-bottom: calc(var(--naviSize) + var(--contentPadding));
}

    .infoBoxes__column{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5em;
        }

    .infoBoxes__column:last-child>.infoBox:last-child{
        margin-bottom: 0px;
    }

    .infoBoxes__group{
        display: flex;
        gap: 0.5em;
        /* width: 100%; */
        border-radius: 0.5em;
        flex-shrink: 0;
        flex-grow: 1;
        max-width: 80em;
    }




.infoBox{
    /* min-width: 20em; */
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    flex-grow: 1;
    max-width: 100%;
}

    .infoBox--closed{
        height: fit-content !important;
    }

    /* .infoBox:not(:last-child){
        margin-bottom: 0.5em;
    }
    */

    /* .infoBox--small{
        width: 20em;
    }

    .infoBox--medium{
        width: 40em;
    }

    .infoBox--large{
        width: 60em;
    }

    .infoBox,
    .infoBox--small,
    .infoBox--medium,
    .infoBox--large{
        width:100%;
    } */


.infoBox__disclaimer{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .infoBox__disclaimer>span{
        text-align: center;
        font-size: 3em;
        font-weight: 500;
        transform: rotate(-20deg);
    }



.infoBox__header{
    height: 3em;
    /* font-size: 0.8em; */
    color: rgb(var(--colUIText01));
    background-color: rgba(var(--colUIBack02),0.75);
}

    .noTouch .infoBox__header:hover{
        background-color: rgba(var(--colUIBack02), 1);

    }


.infoBox__content{
    background-color: rgba(var(--colUIBack04),0.85);
    overflow: hidden;
}





/*------------------------------------------------------------------ BOXEN -----------------------------------------------*/

@media (min-width: 48em) {
    .infoBoxes{
        --contentPadding: 2em;
    }
}

@media (min-width: 80em){

    .infoBoxes{
        flex-direction: row;
        height: fit-content;
        justify-content: space-between;
        overflow: visible;
    }

    .infoBox{
        width: unset;
    }

    .infoBoxes__group{
        flex-shrink: 1;
    }


}