/*
<!--section:code-->
```css */
.breakout,
.breakout-all {
  /* Prepare the container for breakout elements */
  padding-inline: 10%;
  max-width: calc(10% + 65ch + 10%);
  @media (width < 768px) {
    padding-inline: 1rem;
    max-width: calc(1rem + 65ch + 1rem);
  }

  /* Breakout direct children only */
  & > * {
    &:is(
      table,
      pre,
      figure, video, iframe, canvas,
      img, picture,
      /* Custom utility classes for other tags that need to be broken out */
      .breakout-item,
      .breakout-item-max
    ) {
      width: fit-content;
      min-width: 100%;
      max-width: min(125%, 100dvw);
      margin-left: 50%;
      transform: translateX(-50%);
    }

    /* Respect img/picture min-width */
    &:is(img, picture):not(.does-not-exist) /* soft win specificity over .breakout-item above */ {
      min-width: auto;
    }

    /* Max out the width of the element */
    &.breakout-item-max {
      width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
    }
  }
}

.breakout-all > * {
  &:is(h2, h3, h4, h5, h6, hr):not([class]) {
    position: relative;

    &::before {
      content: "";
      display: block;
      position: absolute;
      background: gray;
      opacity: 12.5%;
    }
  }

  &:is(h2, h3, h4, h5, h6):not([class]) {
    &::before {
      width: 10em;
      right: 100%;
      margin-right: 0.8ch;
      height: 0.25em;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(to left, gray, transparent);
    }

    /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
    &:where(hr + *) {
      &::before {
        display: none !important;
      }
    }
  }
  &:is(hr) {
    height: 0.5rem;
    border: none;
    overflow: visible;

    &::before {
      width: 100dvw;
      left: 50%;
      height: 100%;
      transform: translateX(-50%);
    }
  }
}
/*```
<!--section:summary-->

The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.

<!--section:docs-->

### Demo <!-- inside parent .breakout -->

Break out a wide image from the text flow:

<div><!-- Dummy div to avoid p tag in Markdown --></div><img
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3000' height='300'><rect width='100%' height='100%' fill='gray'/></svg>">

Or table:

| Imagine<hr> | a<hr> | really<hr> | wide<hr> | table<hr> | here<hr> |
| ----------- | ----- | ---------- | -------- | --------- | -------- |
| ...         |

Or code block:

```html
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
```

Or anything else:

<article class="breakout-item-max" data-theme="dark">

  Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
</article>

<div><hr></div>

`.breakout-all` also visually breaks out headings and horizontal rules:

<h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
<hr>

<!--section--> */