<div class="demo-9-3">
  <div class="container">
    <div class="row">
      <section class="col-md-9">9</section>
      <div class="col-md-3">
          3
      </div>
    </div>
  </div>
</div>
<hr>

<div class="demo-2-10">
  <div class="container">
    <div class="row">
      <div class="col-md-2">2</div>
      <div class="col-md-10">10</div>
    </div>
  </div>
</div>
<hr>

<div class="demo-4-8">
  <div class="container">
    <div class="row">
      <div class="col-md-4">4</div>
      <div class="col-md-8">8</div>
    </div>
  </div>
</div>
<hr>

<div class="jumbotron rounded-0 mb-0 text-white">
    <div class="container">
        <h1 class=" font-weight-bold"><code>linear-gradient()</code> faux background colors</h1>
        <p class="lead w-75">How to create column background colors without the need for images or pseudo-elements.</p>
    </div>
</div>

<div class="torso typical-faux">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
          <div class="main pr-md-4 py-3 py-md-5">
              <h2>I’m a main column</h2>
              <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.Vestibulum id ligula porta felis.</p>
              
                <div class="embed-responsive embed-responsive-16by9 mb-4">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/d0LeL9BUPtA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>

             <p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
              </p>
          </div>
      </div>
      <div class="col-md-4">
        <div class="pl-md-4 px-3 px-md-0 py-3 py-md-5">
            <h3>I’m a sidebar</h3>
            <p>Ppraesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue.
            </p>
         </div>
      </div>
    </div>
  </div>
</div>

$container: 1140px;
$gridColumns: 12;

.container {
    max-width: $container;
}

@mixin fauxColumns($cols, $colorTwo, $colorOne: transparent, $colSelector: 'col-', $rowSelector: 'row') {
    $colPercent: $cols / $gridColumns;
    $colWidth: $colPercent * $container;

       // set backgrounds on at small screen
    .#{$rowSelector} > [class^='#{$colSelector}']:nth-child(1) {
        background-image: linear-gradient(to bottom, $colorOne, $colorOne);
    }
    
    .#{$rowSelector} > [class^='#{$colSelector}']:nth-child(2) {
        background-image: linear-gradient(to bottom, $colorTwo, $colorTwo);
    }

    @media (min-width: 768px) {
        .#{$rowSelector} > [class^="#{$colSelector}"]:nth-child(n) {
            background-image: none;
        }
        background-image: linear-gradient(to right, $colorOne percentage($colPercent), $colorTwo 1%);
    }

    @media (min-width: 1140px) {
        background-image: linear-gradient(to right, $colorOne calc((50% - (#{$container} / 2) + #{$colWidth})), $colorTwo 1%);
    }
}

.demo-9-3 {
    @include fauxColumns(9, #ff675b, #d3e6ea);
}

.demo-2-10 {
    @include fauxColumns(2, #d3e6ea, #ff675b);
}

.demo-4-8 {
    @include fauxColumns(4, #d3e6ea, #ff675b);
}

.typical-faux {
    @include fauxColumns(8, #f2efed);
}

//// Demo
@import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap");

body {
    font-family: Hind, sans-serif;
    font-weight: 300;
}

[class^="demo"] [class^="col"] {
    align-items: center;
    box-shadow: inset 0 0 0 1px #252d2f;
    display: flex;
    height: 50px;
}

.jumbotron {
    background-color: #252d2f;
}