@media (min-width: 1170px) {
    .container {
        max-width: 1470px;
    }

    /*----------------------------
        Two column layout stuff
      ---------------------------*/
    /* Main Section Headings and sub headings */
    article .begin-examples ~ h2,
    article .begin-examples ~ h2 + p,
    article .begin-examples ~ h3,
    article .begin-examples ~ h3 + p,
    article .begin-examples ~ h4 {
        width: 100%;
        clear: both;
    }

    /* Columns */
    article .begin-examples ~ h3,
        /* article .begin-examples ~ p, */
    article .begin-examples ~ h4,
    article .begin-examples ~ .lefthighlight {
        width: 50%;
    }

    article .begin-examples ~ .righthighlight {
        width: 50%;
    }

    /* Left Column */
    article .begin-examples ~ .lefthighlight {
        float: left;
        padding-right: 1rem;
        clear: left;
    }

    /* Right Column */
    article .begin-examples ~ .righthighlight {
        float: right;
        clear: right;
        margin-bottom: 1rem;
    }

    /* Reset */
    article .end-examples ~ p,
    article .end-examples ~ h3,
    article .end-examples ~ h4,
    article .end-examples ~ .lefthighlight {
        width: auto;
        float: none;
        clear: none;
    }

    article .end-examples ~ .righthighlight {
        width: auto;
        float: none;
        clear: none;
    }

    .end-examples {
        clear: both;
    }

    @media print, screen and (max-width: 1170px) {

        /*----------------------------
            Two column layout media
          ---------------------------*/
        article .begin-examples ~ h3,
        article .begin-examples ~ p,
        article .begin-examples ~ h4,
        article .begin-examples ~ .lefthighlight {
            width: 100%;
            float: none;
            clear: none;
        }

        article .begin-examples ~ .righthighlight {
            width: 100%;
            float: none;
            clear: none;
        }

    }

    /*----------------------------
        Other media
      ---------------------------*/
    @media print, screen and (max-width: 750px) {
        article > h3,
        article > p {
            padding: 0;
            margin-bottom: 0.2rem;
        }

        article .lefthighlight {
            margin-bottom: 1.4rem;
            background: #f7f7f7;
            padding: 0.2rem;

            word-wrap: break-word;
        }

        article .lefthighlight pre {
            margin-bottom: 0;
        }

        article .righthighlight {
            margin-bottom: 1.4rem;
            background: #f7f7f7;
            padding: 0.2rem;

            word-wrap: break-word;
        }

        article .righthighlight pre {
            margin-bottom: 0;
        }
    }
}