@forward '../shared/markdown-container';


$stop1: 500px;
$stop2: 600px;
$stop3: 900px;

.columns-2.markdown-preview-view .markdown-preview-section { column-count: 2; }
.columns-3.markdown-preview-view .markdown-preview-section { column-count: 3; }
.columns-4.markdown-preview-view .markdown-preview-section { column-count: 4; }

@container markdown-view (#{$stop2} < width < #{$stop3}) {
    .columns-4.markdown-preview-view .markdown-preview-section { column-count: 3; }
}

@container markdown-view (#{$stop1} < width < #{$stop2}) {
    :is(.columns-3, .columns-4).markdown-preview-view .markdown-preview-section { column-count: 2; }
}

@container markdown-view (width < #{$stop1}) {
    :is(.columns-2, .columns-3, .columns-4).markdown-preview-view .markdown-preview-section { column-count: 1; }
}

:is(.columns-2, .columns-3, .columns-4).markdown-preview-view .markdown-preview-section {
    column-rule: 1px solid var(--color-base-50);
    column-gap: 50px;
}


@media print {
    .print .columns-2.markdown-preview-view { column-count: 2; }
    .print .columns-3.markdown-preview-view { column-count: 3; }
    .print .columns-4.markdown-preview-view { column-count: 4; }

    @media (#{$stop2} < width < #{$stop3}) {
        .print .columns-4.markdown-preview-view { column-count: 3; }
    }

    @media (width < #{$stop2}) {
        .print :is(.columns-3, .columns-4).markdown-preview-view { column-count: 2; }
    }

    .print :is(.columns-2, .columns-3, .columns-4).markdown-preview-view {
        column-rule: 1px solid var(--color-base-50);
        column-gap: 50px;
    }
}


:is(.columns-2, .columns-3, .columns-4).markdown-preview-view .markdown-preview-pusher,
:is(.columns-2, .columns-3, .columns-4).markdown-preview-view .mod-header,
:is(.columns-2, .columns-3, .columns-4).markdown-preview-view .mod-frontmatter,
:is(.columns-2, .columns-3, .columns-4).markdown-preview-view :is(h1),
:is(.columns-2, .columns-3, .columns-4).markdown-preview-view [alt~="span"] {
    column-span: all;
}

:is(.columns-2, .columns-3, .columns-4).markdown-preview-view :is(h2, h3, h4, h5, h6) {
    break-after: avoid-column;
}

:is(.columns-2, .columns-3, .columns-4).markdown-preview-view [alt~="span"] {
    display: block;
    width: fit-content;
    margin-inline: auto;
}
:is(.columns-2, .columns-3, .columns-4).markdown-preview-view [alt~="span"]:not(img) {
    margin-block: var(--p-spacing);
}

:is(.columns-2, .columns-3, .columns-4).markdown-preview-view .list-bullet {
    float: unset;
    margin-inline-end: 0.8em;
}