/*
 *
 *  Two By Two content 
 *
*/

    /*  icon above h5 */
    .layout-two-by-two i.bi {
        margin-bottom: 0.75rem;
        display: inline-block;
        color: grey;
        font-size: 1.5rem;
    }

    /*  icon inline with  h5 */
    .layout-two-by-two h5 i.bi {
        margin-bottom: 0.75rem;
        display: inline-block;
        color: grey;
        font-size: 1.5rem;
    }


    /*  each 'section' of content - basiocally a .col */
    .layout-two-by-two .row>div
    {
        border:0px solid red;
        margin-bottom:  3rem;
        margin-bottom: calc( var(--var-layout-spacer-between-rows) * 4);
    }






/*
 *
 *  Two Column List
 *
*/
            /*  basically first .col header  */
            .layout-col-list-two .row .row>div:first-child
            {
                xborder:1px solid red;
                margin-bottom: calc( var(--var-layout-spacer-between-rows) * 1);
            }

            /*  basically each .col  */
            .layout-col-list-two .row .row>div
            {
                xborder:2px solid green;
                margin-bottom: calc( var(--var-layout-spacer-between-rows) * 4);
            }


            .layout-col-list-two ul
            {
                xlist-style: none;
                xpadding: 0px;
                xmargin-bottom:0px;
                padding-left: 15px;
            }

            /*  basically first .col header  */
            .layout-col-list-two li
            {
                xborder:1px solid yellow;
                xmargin-bottom: calc( var(--var-layout-spacer-between-rows) * 2);
                padding-left: 0.7rem;
            } 

            

            .layout-col-list-two ul ul
            {
                margin-top: 1.25rem;
                padding-left: 1.2rem;
            }






/*
 *
 *  Three Column List
 *
*/
            /*  basically first .col header  */
            .layout-col-list-three .row .row>div:first-child
            {
                xborder:1px solid red;
                margin-bottom: calc( var(--var-layout-spacer-between-rows) * 1);
            }

            /*  basically each .col  */
            .layout-col-list-three .row .row>div
            {
                xborder:1px solid red;
                margin-bottom: calc( var(--var-layout-spacer-between-rows) * 3);
            }


            .layout-col-list-three ul
            {
                list-style: none;
                padding: 0px;
                margin-bottom:0px;
            }

            /*  basically first .col header  */
            .layout-col-list-three li
            {
                xborder:1px solid yellow;
                margin-bottom: calc( var(--var-layout-spacer-between-rows) * 1.5);
            } 
            
  
/*
 *
 *  Three Column List with icons
 *
*/            
            /*  basically first .col header  */
            .layout-col-list-three-icons .row .row>div:first-child
            {
                xborder:4px solid orange;
                margin-bottom: calc( var(--var-layout-spacer-between-rows) * 1);
            }          

            /*  basically each .col  */
            .layout-col-list-three-icons .row .row>div
            {
                xborder:4px solid red;
                margin-bottom: calc( var(--var-layout-spacer-between-rows) * 4);
            }

            .layout-col-list-three-icons ul
            {
                list-style: none;
                padding: 0px;
                margin-bottom:0px;
            }             

            /*  each list item  */
            .layout-col-list-three-icons li
            {
                border:0px solid pink;
                xxmargin-bottom: calc( var(--var-layout-spacer-between-rows) * 2);
                text-align: left;
            } 
            

            .layout-col-list-three-icons img {
                border:0px solid green;
                max-width: 160px;
                max-height: 160px;
                width:  75%;
                height: auto;
                xmargin:auto 0px;
                xpadding: auto 0px;
                display: inline-block;
            }






            
/*
 *
 *  Two Column List
 *
*/

            /*  This payout is currently hidden/unused  */
            /*

            .two-col-list
            {
                list-style: none;
                padding: 0;
                xxxborder: 1px solid purple;
                margin-bottom: 1.5rem;
            }


            .two-col-list li
            {
                XXXfont-size: 20px;
                margin-bottom: 0.5rem;
                line-height: 1.5;
                font-size: var(--var-font-size-p, 10px);
                                
            }

            .two-col-list img {
                border:0px solid red;
                width: 50px;
                height:50px;
                margin-right: 0.75rem;
                filter: grayscale(100%);
            }
            */

            
            /*

                I decided not to go with this design

                .newspaper-columns {
                    -webkit-column-count: 2;
                    -webkit-column-gap: 50px;
                    -moz-column-count: 2;
                    -moz-column-gap: 50px;
                    column-count:2;
                    column-gap:50px;
                    
                    text-align: justify;
                }
            */