/* Extends https://github.com/picocss/pico/blob/main/scss/layout/
<!--section:docs,columns-->

### Auto-columns

`.columns` automatically creates columns with at least 30 characters each:

<article class="columns">
  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
</article>

The smaller the font size, the more columns will be created:

<article class="columns" style="font-size: 65%">
  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
</article>

Useful for tables of contents and long lists.

How it works:
```css */
.columns {
  columns: 25ch auto; /* common container 65ch / 25ch => 2 columns max, with a buffer for list paddings */

  /* Avoid breaking inside elements, such as nested lists */
  > * {
    break-inside: avoid;
  }
}
/*```
<!--section:docs,jump-->

### Jump to top

`data-jump-to="top"` fixes element to the corner and adds extra top padding to make it easy to click:
```css */
[data-jump-to="top"] {
  position: fixed;
  bottom: 0;
  right: 0;
  padding-top: 50vh;
}
/*```
<!--section--> */