devdocs/assets/stylesheets/pages/_mdn.scss

._mdn {
  container-type: inline-size;

  .index { // HTML, CSS
    -webkit-columns: 16em;
       -moz-columns: 16em;
            columns: 16em;

    > span {
      display: block;
      font-size: 1rem;
      font-weight: var(--boldFontWeight);
    }

    ul, ol {
      margin: 0 0 1em;
      padding: 0;
      line-height: 1.5;
      list-style: none;
    }

    li { padding-left: 1em; }
  }

  > h2 { @extend %block-heading; }
  > h3 { @extend %block-label, %label-blue; }
  > h4 { font-size: 1em; }

  p > code, li > code { @extend %label; }

  > .note,
  .notecard, // MDN 2021
  .notice,
  .warning,
  .overheadIndicator,
  .blockIndicator,
  .syntaxbox,           // CSS, JavaScript
  .twopartsyntaxbox,    // CSS
  .inheritsbox,         // JavaScript
  .eval:first-of-type { // JavaScript
    @extend %note;
  }

  .warning { @extend %note-red; }

  > .note {
    em {
      font-style: normal;
      font-weight: var(--boldFontWeight);
    }

    > ul { margin: 1em 0; }
    > p:last-child, > ul:last-child { margin-bottom: 0; }
  }

  .inlineIndicator {
    white-space: nowrap;
    @extend %label;
  }

  .syntaxbox a,        // CSS
  .twopartsyntaxbox a, // CSS
  .inlineIndicator > a {
    color: inherit;
    @extend %internal-link;
  }

  .deprecated, .obsolete { @extend %label-red; }
  .nonStandard, .projectSpecific, .experimental { @extend %label-orange; }

  .htmlelt,
  .cssprop {
    display: table;
    @extend %note, %note-blue;

    > li {
      display: table-row;
      margin: 0;

      > dfn {
        display: table-cell;
        padding: .125rem 1.5rem .125rem 0;
        white-space: pre;
        border: 0;
        cursor: inherit;

        &:after { content: ':'; }
      }
    }

    th, td {
      background: none;
      border: 0;
    }
  }

  dt > strong > code, // HTML element attribute
  dl > dt > code {    // CSS property value, Javascript function argument
    font-family: inherit;
    font-weight: var(--boldFontWeight);
    font-size: inherit;
  }

  .eventinfo { // DOM event
    > dd + dt { margin-top: 0; }
  }

  .cleared { clear: both; } // CSS/box-shadow

  code > strong { font-weight: normal; }

  // Compatibility tables

  .bc-github-link {
    float: right;
    font-size: .75rem;
  }

  .bc-supports-yes, .bc-supports-yes + dd, .bc-supports-yes + dd + dd { background: var(--noteGreenBackground); }
  .bc-supports-unknown, .bc-supports-unknown + dd, .bc-supports-unknown + dd + dd { background: var(--noteBackground); }
  .bc-supports-partial, .bc-supports-partial + dd, .bc-supports-partial + dd + dd { background: var(--noteOrangeBackground); }
  .bc-supports-no, .bc-supports-no + dd, .bc-supports-no + dd + dd { background: var(--noteRedBackground); }

  .bc-table {
    min-width: 100%;

    dl {
      margin: .25rem 0 0;
      padding: .25rem 0 0;
      font-size: .75rem;
      border-top: 1px solid var(--boxBorder);
    }

    dd { margin: 0; }
  }

  // based on https://github.com/mdn/yari/blob/63936bc42c/client/src/document/interactive-examples.scss
  .interactive {
      width: 100%;
      height: 680px;
      &.is-js-height {
        height: 520px;
      }
      &.is-shorter-height {
        height: 440px;
      }
      &.is-taller-height {
        height: 730px;
      }
      &.is-tabbed-shorter-height {
        height: 490px;
      }
      &.is-tabbed-standard-height {
        height: 550px;
      }
      &.is-tabbed-taller-height {
        height: 780px;
      }
    }
  @container (min-width: 594px) {
    .interactive {
      height: 380px;

      &.is-js-height {
        height: 450px;
      }
      &.is-shorter-height {
        height: 370px;
      }
      &.is-taller-height {
        height: 660px;
      }
      &.is-tabbed-shorter-height {
        height: 360px;
      }
      &.is-tabbed-standard-height {
        height: 430px;
      }
      &.is-tabbed-taller-height {
        height: 640px;
      }
    }
  }
}