/* Čistič SVG: rozvržení podle šířky obsahu stránky (ne okna), protože vedle jsou postranní panely různé šířky. */
#svg-cistic {
    container-type: inline-size;
}

.svg-mrizka {
    display: grid;
    gap: 1.5rem;
    grid-template-areas: "vstup" "nahled" "kod";
}

.svg-vstup { grid-area: vstup; }
.svg-nahled { grid-area: nahled; }
.svg-kod { grid-area: kod; }

#svg-nahled {
    aspect-ratio: 4 / 3;
    max-height: 70vh;
}

/* úspora a tlačítka vedle kontroly před tiskem, jen když je místo */
.svg-vysledek {
    display: grid;
    gap: 1.5rem;
}

@container (min-width: 900px) {
    .svg-mrizka {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-areas: "nahled vstup" "nahled kod";
        grid-template-rows: auto 1fr;
        align-items: start;
    }

    .svg-nahled {
        position: sticky;
        top: 70px;
    }

    #svg-nahled {
        aspect-ratio: 1;
    }
}

@container (min-width: 560px) {
    .svg-vysledek {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}