@@ -28,7 +28,7 @@ $GLOBALS['TL_DCA']['tl_content']['palettes']['grid_placement_wrapper'] = '

 ';

 $GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_addImage'] = 'vr_bw_bgSRC,size,vr_bw_bgSize,vr_bw_bgPos,vr_bw_bgOpacity';

-$GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_bgBesideContent'] = 'vr_bw_bgHorizontalPosition';

+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_bgBesideContent'] = 'vr_bw_bgHorizontalPosition,vr_bw_bgAsideContentResponsive';

 $GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_minHeight_-mh-ratio'] = 'vr_bw_mh_ratio';

 $GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_minHeight_-mh-vh'] = 'vr_bw_mh_viewport';

 $GLOBALS['TL_DCA']['tl_content']['subpalettes']['vr_bw_width_-width-extended'] = 'vr_bw_widthText';

@@ -118,6 +118,16 @@ $GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgHorizontalPosition'] = [

     'sql'       => "varchar(32) NOT NULL default ''"

 ];

+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgAsideContentResponsive'] = [

+    'inputType' => 'select',

+    'options'   => [

+        ''          => 'Unten',

+        '-bg-aside-content-reverse'   => 'Oben',

+    ],

+    'eval'      => ['tl_class' => 'w50'],

+    'sql'       => "varchar(32) NOT NULL default ''"

+];

+

 $GLOBALS['TL_DCA']['tl_content']['fields']['vr_bw_bgHorizontalWidth'] = [

     'inputType' => 'select',

     'default'   => '-bg-horizontal-width-50',

@@ -50,6 +50,14 @@

                 <source>Displays the image beside the content instead of behind the content.</source>

                 <target>Zeigt das Bild neben dem Inhalt und nicht hinter dem Inhalt an.</target>

             </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgAsideContentResponsive.0">

+                <source>Image position on mobile</source>

+                <target>Bildposition auf dem Mobilgerät</target>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgAsideContentResponsive.1">

+                <source>Determines whether the image should be displayed below or above the text on mobile devices.</source>

+                <target>Legt fest ob das Bild auf mobilen Geräten unter oder über dem Text angezeigt werden soll.</target>

+            </trans-unit>

             <trans-unit id="tl_content.vr_bw_bgHorizontalPosition.0">

                 <source>Horizontal position</source>

                 <target>Horizontale Position</target>

@@ -38,6 +38,12 @@

             <trans-unit id="tl_content.vr_bw_bgBesideContent.1">

                 <source>Displays the image beside the content instead of behind the content.</source>

             </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgAsideContentResponsive.0">

+                <source>Image position on mobile</source>

+            </trans-unit>

+            <trans-unit id="tl_content.vr_bw_bgAsideContentResponsive.1">

+                <source>Determines whether the image should be displayed below or above the text on mobile devices.</source>

+            </trans-unit>

             <trans-unit id="tl_content.vr_bw_bgHorizontalPosition.0">

                 <source>Horizontal position</source>

             </trans-unit>

@@ -39,7 +39,7 @@

   /* Background scaling */

   /* Background position */

   /* Background opacity */

-  /* Bacgkround beside */

+  /* Background beside */

   /* Background color */

   /* Foreground base */

   /* Height */

@@ -150,22 +150,44 @@

   opacity: 1;

 }

-.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg {

+.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg {

   inset: 0 auto 0 0;

   width: 50%;

 }

-.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg {

+.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg {

   inset: 0 0 0 auto;

 }

-.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {

+.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid .fragments {

   padding-left: calc(50% + var(--vr-bw-content-gap));

 }

-.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments {

+.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid .fragments {

   padding-left: 0;

   padding-right: calc(50% + var(--vr-bw-content-gap));

 }

+@media (max-width: 599px) {

+  .content-background-wrapper.-bg-aside-content {

+    display: flex;

+    flex-direction: column-reverse;

+  }

+  .-bg-aside-content-reverse.content-background-wrapper.-bg-aside-content {

+    flex-direction: column;

+  }

+  .content-background-wrapper.-bg-aside-content .content-background-wrapper-bg {

+    position: relative;

+    width: 100%;

+  }

+  .content-background-wrapper.-bg-aside-content .content-background-wrapper-bg img {

+    position: relative;

+    width: 100%;

+    height: auto;

+  }

+  .content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg .content-grid .fragments {

+    padding-left: 0;

+    padding-right: 0;

+  }

+}

 .content-background-wrapper.-alt-color-1 {

   background-color: var(--vr-bw-bgcolor-1);

 }

@@ -2,4 +2,4 @@

     (var(--vr-bw-content-max-width) - var(--vr-bw-indent-max-width)) / 2

   );--vr-bw-breakout-size:calc(

     (var(--vr-bw-breakout-max-width) - var(--vr-bw-content-max-width)) / 2

-  )}@media screen and (max-width:599px){:root{--vr-bw-padding-inline:.5rem}}.content-background-wrapper{position:relative}.content-background-wrapper .content-background-wrapper-bg{position:absolute;inset:0}.content-background-wrapper .content-background-wrapper-bg img{position:absolute;inset:0;object-fit:cover;object-position:50% 50%;display:block;width:100%;height:100%}.content-background-wrapper .content-background-wrapper-bg video{position:absolute;inset:0;display:block;width:100%;height:100%}.-bg-size-contain.content-background-wrapper .content-background-wrapper-bg img{object-fit:contain}.-bg-size-stretch.content-background-wrapper .content-background-wrapper-bg img{object-fit:fill}.-bg-size-auto.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-fit:none}.-bg-pos-0-0.content-background-wrapper .content-background-wrapper-bg img{object-position:0 0}.-bg-pos-50-0.content-background-wrapper .content-background-wrapper-bg img{object-position:50%0}.-bg-pos-100-0.content-background-wrapper .content-background-wrapper-bg img{object-position:100%0}.-bg-pos-0-50.content-background-wrapper .content-background-wrapper-bg img{object-position:0 50%}.-bg-pos-50-50.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 50%}.-bg-pos-100-50.content-background-wrapper .content-background-wrapper-bg img{object-position:100% 50%}.-bg-pos-0-100.content-background-wrapper .content-background-wrapper-bg img{object-position:0 100%}.-bg-pos-50-100.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 100%}.-bg-pos-100-100.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-position:100% 100%}.-bg-opacity-10.content-background-wrapper .content-background-wrapper-bg{opacity:.1}.-bg-opacity-20.content-background-wrapper .content-background-wrapper-bg{opacity:.2}.-bg-opacity-30.content-background-wrapper .content-background-wrapper-bg{opacity:.3}.-bg-opacity-40.content-background-wrapper .content-background-wrapper-bg{opacity:.4}.-bg-opacity-50.content-background-wrapper .content-background-wrapper-bg{opacity:.5}.-bg-opacity-60.content-background-wrapper .content-background-wrapper-bg{opacity:.6}.-bg-opacity-70.content-background-wrapper .content-background-wrapper-bg{opacity:.7}.-bg-opacity-80.content-background-wrapper .content-background-wrapper-bg{opacity:.8}.-bg-opacity-90.content-background-wrapper .content-background-wrapper-bg{opacity:.9}.-bg-opacity-100.content-background-wrapper .content-background-wrapper-bg{opacity:1}.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:calc(50% + var(--vr-bw-content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-beside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-content-gap))}.content-background-wrapper.-alt-color-1{background-color:var(--vr-bw-bgcolor-1)}.content-background-wrapper.-alt-color-2{background-color:var(--vr-bw-bgcolor-2)}.content-background-wrapper.-alt-color-3{background-color:var(--vr-bw-bgcolor-3)}.content-background-wrapper.-alt-color-black{background-color:#000}.content-background-wrapper.-alt-color-black .content-background-wrapper-fg,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h6{color:#fff}.content-background-wrapper.-alt-color-white{background-color:#fff}.content-background-wrapper.-alt-color-white .content-background-wrapper-fg,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h6{color:#000}.content-background-wrapper .content-background-wrapper-fg{position:relative;box-sizing:border-box;display:flex;align-items:flex-start}.-mh-small.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-small)}.-mh-medium.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-medium)}.-mh-large.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-large)}.-mh-viewport-100.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:100svh}.-mh-viewport-66.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:66.666svh}.-mh-viewport-50.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:50svh}.-mh-viewport-33.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:33.333svh}.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{display:table;content:"";padding-top:100%;float:left}.-mh-ratio-21-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:42.857%}.-mh-ratio-16-10.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:62.5%}.-mh-ratio-16-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:56.25%}.-mh-ratio-8-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:37.5%}.-mh-ratio-5-4.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:80%}.-mh-ratio-4-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:75%}.-mh-ratio-3-2.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:66.666%}.-mh-ratio-5-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:20%}.-mh-ratio-4-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:25%}.-mh-ratio-3-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:33.333%}.-mh-ratio-2-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:50%}.-mh-ratio-1-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:100%}.content-background-wrapper .content-background-wrapper-fg .content-grid{width:100%;display:grid;grid-template-columns:[full-width-start]minmax(var(--vr-bw-padding-inline),1fr)[breakout-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[content-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[indent-start]min(100% - var(--vr-bw-padding-inline)*6,var(--vr-bw-indent-max-width))[indent-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[content-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[breakout-end]minmax(var(--vr-bw-padding-inline),1fr)[full-width-end]}.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content;position:relative}.-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent}.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/indent}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent/breakout}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/breakout}.-width-full.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}@media screen and (max-width:599px){.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}.-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}}.-va-center.content-background-wrapper .content-background-wrapper-fg{align-items:center}.-va-bottom.content-background-wrapper .content-background-wrapper-fg{align-items:flex-end}.-va-stretch.content-background-wrapper .content-background-wrapper-fg{display:flex;align-items:stretch}.-va-stretch.content-background-wrapper .content-background-wrapper-fg .content-grid{flex:1}.-padding.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0}.-padding-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0}.-padding-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0}.-padding-top.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0 0}.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0 0}.-padding-top-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0 0}.-padding-bottom.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-small)}.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-medium)}.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-large)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg{color:var(--vr-bw-color-inverted)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg h1,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h2,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h3,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h4,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h5,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h6{color:var(--vr-bw-color-headline-inverted)}

\ No newline at end of file

+  )}@media screen and (max-width:599px){:root{--vr-bw-padding-inline:.5rem}}.content-background-wrapper{position:relative}.content-background-wrapper .content-background-wrapper-bg{position:absolute;inset:0}.content-background-wrapper .content-background-wrapper-bg img{position:absolute;inset:0;object-fit:cover;object-position:50% 50%;display:block;width:100%;height:100%}.content-background-wrapper .content-background-wrapper-bg video{position:absolute;inset:0;display:block;width:100%;height:100%}.-bg-size-contain.content-background-wrapper .content-background-wrapper-bg img{object-fit:contain}.-bg-size-stretch.content-background-wrapper .content-background-wrapper-bg img{object-fit:fill}.-bg-size-auto.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-fit:none}.-bg-pos-0-0.content-background-wrapper .content-background-wrapper-bg img{object-position:0 0}.-bg-pos-50-0.content-background-wrapper .content-background-wrapper-bg img{object-position:50%0}.-bg-pos-100-0.content-background-wrapper .content-background-wrapper-bg img{object-position:100%0}.-bg-pos-0-50.content-background-wrapper .content-background-wrapper-bg img{object-position:0 50%}.-bg-pos-50-50.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 50%}.-bg-pos-100-50.content-background-wrapper .content-background-wrapper-bg img{object-position:100% 50%}.-bg-pos-0-100.content-background-wrapper .content-background-wrapper-bg img{object-position:0 100%}.-bg-pos-50-100.content-background-wrapper .content-background-wrapper-bg img{object-position:50% 100%}.-bg-pos-100-100.content-background-wrapper .content-background-wrapper-bg img,.content-background-wrapper .content-background-wrapper-bg video{object-position:100% 100%}.-bg-opacity-10.content-background-wrapper .content-background-wrapper-bg{opacity:.1}.-bg-opacity-20.content-background-wrapper .content-background-wrapper-bg{opacity:.2}.-bg-opacity-30.content-background-wrapper .content-background-wrapper-bg{opacity:.3}.-bg-opacity-40.content-background-wrapper .content-background-wrapper-bg{opacity:.4}.-bg-opacity-50.content-background-wrapper .content-background-wrapper-bg{opacity:.5}.-bg-opacity-60.content-background-wrapper .content-background-wrapper-bg{opacity:.6}.-bg-opacity-70.content-background-wrapper .content-background-wrapper-bg{opacity:.7}.-bg-opacity-80.content-background-wrapper .content-background-wrapper-bg{opacity:.8}.-bg-opacity-90.content-background-wrapper .content-background-wrapper-bg{opacity:.9}.-bg-opacity-100.content-background-wrapper .content-background-wrapper-bg{opacity:1}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{inset:0 auto 0 0;width:50%}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{inset:0 0 0 auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:calc(50% + var(--vr-bw-content-gap))}.-bg-horizontal-align-right.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:calc(50% + var(--vr-bw-content-gap))}@media (max-width:599px){.content-background-wrapper.-bg-aside-content{display:flex;flex-direction:column-reverse}.-bg-aside-content-reverse.content-background-wrapper.-bg-aside-content{flex-direction:column}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg{position:relative;width:100%}.content-background-wrapper.-bg-aside-content .content-background-wrapper-bg img{position:relative;width:100%;height:auto}.content-background-wrapper.-bg-aside-content .content-background-wrapper-fg.content-background-wrapper-fg .content-grid .fragments{padding-left:0;padding-right:0}}.content-background-wrapper.-alt-color-1{background-color:var(--vr-bw-bgcolor-1)}.content-background-wrapper.-alt-color-2{background-color:var(--vr-bw-bgcolor-2)}.content-background-wrapper.-alt-color-3{background-color:var(--vr-bw-bgcolor-3)}.content-background-wrapper.-alt-color-black{background-color:#000}.content-background-wrapper.-alt-color-black .content-background-wrapper-fg,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-black .content-background-wrapper-fg h6{color:#fff}.content-background-wrapper.-alt-color-white{background-color:#fff}.content-background-wrapper.-alt-color-white .content-background-wrapper-fg,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h1,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h2,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h3,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h4,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h5,.content-background-wrapper.-alt-color-white .content-background-wrapper-fg h6{color:#000}.content-background-wrapper .content-background-wrapper-fg{position:relative;box-sizing:border-box;display:flex;align-items:flex-start}.-mh-small.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-small)}.-mh-medium.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-medium)}.-mh-large.content-background-wrapper .content-background-wrapper-fg{min-height:var(--vr-bw-height-large)}.-mh-viewport-100.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:100svh}.-mh-viewport-66.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:66.666svh}.-mh-viewport-50.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:50svh}.-mh-viewport-33.-mh-vh.content-background-wrapper .content-background-wrapper-fg{min-height:33.333svh}.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{display:table;content:"";padding-top:100%;float:left}.-mh-ratio-21-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:42.857%}.-mh-ratio-16-10.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:62.5%}.-mh-ratio-16-9.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:56.25%}.-mh-ratio-8-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:37.5%}.-mh-ratio-5-4.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:80%}.-mh-ratio-4-3.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:75%}.-mh-ratio-3-2.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:66.666%}.-mh-ratio-5-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:20%}.-mh-ratio-4-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:25%}.-mh-ratio-3-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:33.333%}.-mh-ratio-2-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:50%}.-mh-ratio-1-1.-mh-ratio.content-background-wrapper .content-background-wrapper-fg:before{padding-top:100%}.content-background-wrapper .content-background-wrapper-fg .content-grid{width:100%;display:grid;grid-template-columns:[full-width-start]minmax(var(--vr-bw-padding-inline),1fr)[breakout-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[content-start]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[indent-start]min(100% - var(--vr-bw-padding-inline)*6,var(--vr-bw-indent-max-width))[indent-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-content-size))[content-end]minmax(var(--vr-bw-padding-inline),var(--vr-bw-breakout-size))[breakout-end]minmax(var(--vr-bw-padding-inline),1fr)[full-width-end]}.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content;position:relative}.-width-small.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent}.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/indent}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:indent/breakout}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:breakout/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/breakout}.-width-full.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}@media screen and (max-width:599px){.-width-extended.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width}.-width-default-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-default-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended-left.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:full-width/content}.-width-extended-right.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{grid-column:content/full-width}.-width-extended.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-default-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}.-width-extended-left.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 0 0 calc(var(--vr-bw-padding-inline)*2)}.-width-extended-right.-add-text-indent.content-background-wrapper .content-background-wrapper-fg .content-grid>.fragments{padding:0 calc(var(--vr-bw-padding-inline)*2)0 0}}.-va-center.content-background-wrapper .content-background-wrapper-fg{align-items:center}.-va-bottom.content-background-wrapper .content-background-wrapper-fg{align-items:flex-end}.-va-stretch.content-background-wrapper .content-background-wrapper-fg{display:flex;align-items:stretch}.-va-stretch.content-background-wrapper .content-background-wrapper-fg .content-grid{flex:1}.-padding.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0}.-padding-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0}.-padding-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0}.-padding-top.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-small)0 0}.-padding-top-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-medium)0 0}.-padding-top-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:var(--vr-bw-padding-large)0 0}.-padding-bottom.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-small)}.-padding-bottom-medium.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-medium)}.-padding-bottom-large.content-background-wrapper .content-background-wrapper-fg .fragments{padding:0 0 var(--vr-bw-padding-large)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg{color:var(--vr-bw-color-inverted)}.-color-inverted.content-background-wrapper .content-background-wrapper-fg h1,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h2,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h3,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h4,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h5,.-color-inverted.content-background-wrapper .content-background-wrapper-fg h6{color:var(--vr-bw-color-headline-inverted)}

\ No newline at end of file

@@ -96,8 +96,8 @@

     @at-root .-bg-opacity-100#{&} { opacity: 1 }

   }

-  /* Bacgkround beside */

-  &.-bg-beside-content {

+  /* Background beside */

+  &.-bg-aside-content {

     .content-background-wrapper-bg {

       inset: 0 auto 0 0;

       width: 50%;

@@ -117,6 +117,35 @@

         }

       }

     }

+

+    @media (max-width: 599px) {

+      display: flex;

+      flex-direction: column-reverse;

+

+      @at-root .-bg-aside-content-reverse#{&} {

+        flex-direction: column;

+      }

+

+      .content-background-wrapper-bg {

+        position:relative;

+        width: 100%;

+

+        img {

+          position: relative;

+          width: 100%;

+          height: auto;

+        }

+      }

+

+      .content-background-wrapper-fg.content-background-wrapper-fg {

+        .content-grid {

+          .fragments {

+            padding-left: 0;

+            padding-right: 0;

+          }

+        }

+      }

+    }

   }

   /* Background color */

@@ -89,11 +89,15 @@ class BackgroundWrapperController extends AbstractContentElementController

         }

         if ($model->vr_bw_bgBesideContent)

         {

-            $arrCssClasses[] = '-bg-beside-content';

+            $arrCssClasses[] = '-bg-aside-content';

             if (!empty($model->vr_bw_bgHorizontalPosition))

             {

                 $arrCssClasses[] = $model->vr_bw_bgHorizontalPosition;

             }

+            if (!empty($model->vr_bw_bgAsideContentResponsive))

+            {

+                $arrCssClasses[] = $model->vr_bw_bgAsideContentResponsive;

+            }

             /*if (!empty($model->vr_bw_bgHorizontalWidth))

             {

                 $arrCssClasses[] = $model->vr_bw_bgHorizontalWidth;