Elementor section/div flexbox css skew controls - css

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.