Elementor section/div flexbox css skew controls

Question

I'm trying to duplicate this Div Skew Control that I created in a code-pen, that is working, but not responsive yet as I have not set the sizing(s). I'm trying to do the same in Elementor using the FlexBox method and can't seem to find the path/settings as it seems to break the layout when I try to even use the some css direct as show in the sample.

/*BEGIN FOOTER TEMPLATE*/
@media only screen and (max-width: 1440px)
{
    HTML
    {
        font-size: 14px;
    }
}
HTML BODY
{
    font-family: "Montserrat", sans-serif;
}
.footer .footer-top
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: row;
}
.footer .footer-top .top-left
{
    width: 45%;
    min-height: 12rem;
    padding: 0 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    background-color: yellow;
    position: relative;
}
.footer .footer-top .top-left::after
{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: 8rem;
    height: auto;
    background-color: yellow;
    transform-origin: bottom right;
    transform: skewX(-15deg);
}
.footer .footer-top .top-right
{
    width: 55%;
    padding-right: 2rem;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}
.footer .footer-top .top-right .top-right-content
{
    width: 45%;
}
.footer .footer-top .top-right .top-right-content .heading
{
    margin-bottom: 0;
    color: #D30200;
    font-weight: 600;
    line-height: 0.9;
    text-transform: uppercase;
}
.footer .footer-top .top-right .top-right-content .sub
{
    margin-bottom: 0;
    font-weight: 600;
    color: #FFF;
}
.footer .footer-middle
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: row;
}
.footer .footer-middle .middle-left
{
    width: 45%;
    min-height: 12rem;
    padding: 0 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    background-color: #000;
    color: #FFF;
}
.footer .footer-middle .middle-left H4
{
    margin-bottom: 0;
    font-weight: 500;
    text-transform: uppercase;
}
.footer .footer-middle .middle-left H4 SPAN
{
    color: #D30200;
}
.footer .footer-middle .middle-right
{
    width: 55%;
    padding-right: 2rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}
.footer .footer-middle .middle-right::before
{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 8rem;
    height: auto;
    background-color: #FFF;
    transform-origin: top left;
    transform: skewX(-15deg);
}
.footer .footer-middle .middle-right .footer-links-container
{
    width: 60%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
}
.footer .footer-middle .middle-right .footer-links-container UL
{
    margin-bottom: 0;
    list-style: none;
}
.footer .footer-middle .middle-right .footer-links-container UL LI A
{
    color: #000;
    font-weight: 600;
}
.footer .footer-middle .middle-right .footer-links-container UL LI A:hover
{
    color: #D30200;
}
.footer .footer-middle .middle-right .footer-logo-container
{
    width: 40%;
    text-align: center;
}
.footer .footer-bottom
{
    color: white;
    padding: 1rem;
    background-color: #000;
}
.footer .footer-bottom P
{
    font-size: 0.6rem;
    margin-bottom: 0;
    text-align: center;
}
.footer .footer-bottom A
{
    color: white;
    font-size: 0.6rem;
}
/*END FOOTER TEMPLATE*/

<!--bof footer-->
<footer class="footer">
<!--bof footer-top-->
  <section class="footer-top">
<!--bof top-left-->  
    <div class="top-left"><strong>Text text text and more text text text, plus text text text</strong>
    </div>
<!--eof top-left-->
<!--bof top-right-->
    <div class="top-right">
<!--bof top-right-content-->    
      <div class="top-right-content">
        <h2 class="heading">TEXT TEXT TEXT</h2>
        <h4 class="sub">text text text text text text</h4>
      </div>
<!--eof top-right-content-->
    </div>
<!--eof top-right-->
  </section>
<!--eof footer-top-->
<!--bof footer-middle-->
  <section class="footer-middle">
<!--bof middle-left-->  
    <div class="middle-left">
      <h4>TEXT TEXT TEXT <span>MORE TEXT TEXT</span></h4>
    </div>
<!--eof middle-left-->
<!--bof middle-right-->    
    <div class="middle-right"><strong>Text text text and more text text text, plus text text text</strong>
    </div>
<!--eof middle-right--> 
  </section>
<!--eof footer-middle-->
<!--bof footer-bottom-->  
  <section class="footer-bottom">
  </section>
<!--eof footer-bottom-->  
</footer>
<!--eof footer-->

The Elementor plugin is missing the transform function when you select a section and or div, it seems to only show the transform function when changing an element only inside a section/div and I'm looking to see if anyone else has run across this issue or knowns a way to make this work correctly.

Thank you in advance for any direction and or support provided.