/* Einheitliche Navigationskacheln in Startseite und Bereichsauswahlen. */
:root {
    --wp-navigation-tile-width: 322px;
    --wp-navigation-tile-height: 230px;
    --wp-navigation-tile-gap: 22px;
}

@media screen {
    html body[data-view] #main-view-container :is(
        #start-view .start-container,
        .planning-hub-grid,
        .scm-cockpit-grid
    ) {
        display: grid !important;
        width: min(100%, calc(4 * var(--wp-navigation-tile-width) + 3 * var(--wp-navigation-tile-gap))) !important;
        max-width: calc(4 * var(--wp-navigation-tile-width) + 3 * var(--wp-navigation-tile-gap)) !important;
        grid-template-columns: repeat(auto-fit, var(--wp-navigation-tile-width)) !important;
        gap: var(--wp-navigation-tile-gap) !important;
        justify-content: center !important;
        justify-items: center !important;
        align-items: start !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    html body[data-view] #main-view-container :is(
        #start-view .start-kachel,
        .planning-hub-grid > .planning-hub-card,
        .scm-cockpit-grid > .scm-cockpit-card
    ) {
        flex: none !important;
        grid-column: auto !important;
        width: min(100%, var(--wp-navigation-tile-width)) !important;
        min-width: 0 !important;
        max-width: var(--wp-navigation-tile-width) !important;
        height: var(--wp-navigation-tile-height) !important;
        min-height: var(--wp-navigation-tile-height) !important;
        max-height: var(--wp-navigation-tile-height) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-radius: 18px !important;
    }
}

@media screen and (max-width: 390px) {
    html body[data-view] #main-view-container :is(
        #start-view .start-container,
        .planning-hub-grid,
        .scm-cockpit-grid
    ) {
        grid-template-columns: minmax(0, min(100%, var(--wp-navigation-tile-width))) !important;
    }
}