
.is-style-slanted-border-image.wp-block-media-text .wp-block-group__inner-container {
  z-index: 3;
  position: relative;
}

.is-style-slanted-border-image .wp-block-media-text__content {
  position: relative;
  padding-top: 25px;
  padding-bottom: 25px;
}

@media screen and (min-width: 768px) {

   /* LEFT IMAGE */
   .is-style-slanted-border-image .wp-block-media-text__content {
    padding-right: 8%;
    padding-left: 0;
  }
  .is-style-slanted-border-image .wp-block-media-text__content:before {
    overflow-y: hidden !important;
    content: '';
    transform: skew(7deg);
    background-color: #EEB310;
    left: -8%;
    z-index: 2;
    width: 20%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0;
    border-left: 16px solid white;
  }

 

  /* RIGHT IMAGE 
  .has-media-on-the-right // media on left is default, no specific assoc.d class */
  .has-media-on-the-right.is-style-slanted-border-image .wp-block-media-text__content {
    padding-left: 12%;
    padding-right: 0;
  }
  .has-media-on-the-right.is-style-slanted-border-image .wp-block-media-text__content:before {
    overflow-y: hidden !important;
    content: '';
    transform: skew(-7deg);
    background-color: #EEB310;
    left: 93%;
    z-index: 2;
    width: 20%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0;
    border-right: 16px solid white;
    border-left: 0;
  }
 
}

@media (max-width: 767px) {
  .is-style-slanted-border-image.wp-block-media-text {
    grid-template-columns: 100% !important;
  }
  .is-style-slanted-border-image.wp-block-media-text .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
  }
  .is-style-slanted-border-image.wp-block-media-text .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
  }
}

.is-style-slanted-border-image.has-yellow-background-color		 .wp-block-media-text__content:before { background-color: #EEB310; }
.is-style-slanted-border-image.has-orange-background-color		 .wp-block-media-text__content:before { background-color: #F29126; }
.is-style-slanted-border-image.has-coral-red-background-color	 .wp-block-media-text__content:before { background-color: #DD4742; }
.is-style-slanted-border-image.has-black-background-color			 .wp-block-media-text__content:before { background-color: #000000; }
.is-style-slanted-border-image.has-grey-dk-background-color			.wp-block-media-text__content:before { background-color: #34353A; }
.is-style-slanted-border-image.has-nickel-background-color		 .wp-block-media-text__content:before { background-color: #717073; }
.is-style-slanted-border-image.has-grey-md-lt-background-color .wp-block-media-text__content:before { background-color: #ededed; }
.is-style-slanted-border-image.has-grey-lt-background-color		 .wp-block-media-text__content:before { background-color: #f7f7f7; }
.is-style-slanted-border-image.has-white-background-color			 .wp-block-media-text__content:before { background-color: #ffffff; }


/*
 Triangle Down Cover Block Styles

*/

.wp-block-cover.is-style-triangle-down {

}


.wp-block-cover.is-style-triangle-down {
  position:relative;
  overflow:hidden;
}

.wp-block-cover.is-style-triangle-down:before,
.wp-block-cover.is-style-triangle-down:after {
  content: "";
  width: 100%;
  height: 368px;
  right: 50%;
  bottom: 0;
  margin-bottom: -368px;
  background-color: #ffffff;
  position: absolute;
  transform-origin: 100% 0;
  -moz-transform: rotate(12deg);
  -webkit-transform: rotate(12deg);
  transform: rotate(12deg);
  z-index: 1;
}
.wp-block-cover.is-style-triangle-down:after {
  right: 0;
  left: 50%;
  transform-origin: 0 0;
  -moz-transform: rotate(-12deg);
  -webkit-transform: rotate(-12deg);
  transform: rotate(-12deg);
  min-height: auto;
}

.wp-block-cover.is-style-triangle-down.wp-block-cover-image.has-background-dim:not(.has-background-gradient):before,
.wp-block-cover.is-style-triangle-down.wp-block-cover-image .wp-block-cover__gradient-background,
.wp-block-cover.is-style-triangle-down.wp-block-cover.has-background-dim:not(.has-background-gradient):before,
.wp-block-cover.is-style-triangle-down .wp-block-cover__gradient-background {
  position: absolute;
  top: auto;
  bottom: 0;
  z-index: 1;
  opacity: 1 !important;
  right: 50%;
  left: -50%;
}