feat: modernize fe tooling and drop weight

public/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/OfferTeasers.vue

@@ -55,7 +55,6 @@
 </template>
 
 <script>
-    import axios from 'axios';
     import $ from 'jquery';
 
     export default {
@@ -82,13 +81,21 @@
             load() {
                 this.loading = true;
                 sessionStorage.setItem('filterSettings', JSON.stringify(this.filterSettings));
-                axios({
-                    url: this.endpointUri,
-                    method: 'post',
-                    data: $.param({'tx_epevents_ajax[filterSettings]': this.filterSettings})
+                fetch(this.endpointUri, {
+                    method: 'POST',
+                    credentials: 'same-origin',
+                    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
+                    body: $.param({'tx_epevents_ajax[filterSettings]': this.filterSettings})
                 }).then(response => {
-                    this.offers = response.data.offers;
-                    this.filterOptions = response.data.filterOptions;
+                    // fetch only rejects on network errors, so surface HTTP errors here
+                    // to keep the previous behaviour of falling through to .catch()
+                    if (!response.ok) {
+                        throw new Error(response.statusText);
+                    }
+                    return response.json();
+                }).then(data => {
+                    this.offers = data.offers;
+                    this.filterOptions = data.filterOptions;
                     this.loading = false;
                 }).catch(() => {
                     this.loading = false;

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_badge.scss

@@ -1,7 +1,10 @@
+@use "breakpoints";
+@use "mixins";
+
 .badge {
     display: none;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         display: block;
         position: relative;
         z-index: 10;
@@ -27,15 +30,15 @@
     font-size: 20px;
     font-weight: 700;
     line-height: 130%;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         font-size: 32px;
     }
 }
 
 .badge__outline {
-    @include sectionFills(0.15);
+    @include mixins.sectionFills(0.15);
 }
 
 .badge__inner {
-    @include sectionFills();
+    @include mixins.sectionFills();
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_banner.scss

@@ -1,3 +1,5 @@
+@use "mixins";
+
 .banner {
     position: relative;
     margin-bottom: 20px;
@@ -8,7 +10,7 @@
     min-height: 300px;
     padding: 48px 0;
     color: white;
-    @include sectionBackgrounds(0.8);
+    @include mixins.sectionBackgrounds(0.8);
     display: flex;
     justify-content: space-around;
     align-items: center;

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_base.scss

@@ -1,14 +1,20 @@
+@use "breakpoints";
+@use "colors";
+@use "fonts";
+@use "mixins";
+@use "variables";
+
 html,
 body {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
-    font-family: $font-main, Sans-Serif;
+    font-family: fonts.$font-main, Sans-Serif;
     font-weight: 400;
     font-size: 16px;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         font-size: 18px;
     }
 
@@ -41,13 +47,13 @@ html {
     height: auto;
     margin-left: auto;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         display: none;
     }
 }
 
 .navtoggle__icon {
-    fill: $color-font-main;
+    fill: colors.$color-font-main;
     transition: all 0.25s ease-in-out;
 
     .mobilenav--open & {
@@ -62,7 +68,7 @@ html {
     right: 2%;
     width: 40px;
     height: 40px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
     opacity: 0.75;
 }
 
@@ -76,12 +82,12 @@ a {
     &.anchor {
         display: block;
         height: 0;
-        padding-top: $header-height-mobile;
-        margin-top: -$header-height-mobile;
+        padding-top: variables.$header-height-mobile;
+        margin-top: -(variables.$header-height-mobile);
 
-        @include mq($from: tablet) {
-            padding-top: $header-height-desktop;
-            margin-top: -$header-height-desktop;
+        @include breakpoints.mq($from: tablet) {
+            padding-top: variables.$header-height-desktop;
+            margin-top: -(variables.$header-height-desktop);
         }
     }
 }
@@ -126,7 +132,7 @@ ul {
             left: 0;
             content: "\25CF";
             font-size: 18px;
-            @include sectionColoursFromParent();
+            @include mixins.sectionColoursFromParent();
         }
     }
 }
@@ -144,8 +150,8 @@ p {
 hr {
     max-width: 25%;
     margin: 32px auto 32px 0;
-    color: $color-ruler;
-    background-color: $color-ruler;
+    color: colors.$color-ruler;
+    background-color: colors.$color-ruler;
     height: 1px;
     border: none;
 }
@@ -161,7 +167,7 @@ h3,
 }
 
 .headline {
-    @include sectionColoursFromParent();
+    @include mixins.sectionColoursFromParent();
 
     &--icon {
         display: flex;
@@ -186,7 +192,7 @@ h1,
     text-transform: uppercase;
     padding-bottom: 18px;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         font-size: 32px;
         padding-bottom: 24px;
     }
@@ -200,11 +206,11 @@ h1,
         display: block;
         font-size: 16px;
         line-height: 120%;
-        color: $color-brand-primary;
+        color: colors.$color-brand-primary;
         text-transform: none;
-        @include sectionColoursFromParent();
+        @include mixins.sectionColoursFromParent();
 
-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
             font-size: 24px;
         }
 
@@ -221,7 +227,7 @@ h2,
     padding-bottom: 16px;
     font-weight: 400;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         font-size: 24px;
         padding-bottom: 24px;
     }
@@ -231,7 +237,7 @@ h3 {
     font-weight: 400;
     font-size: 16px;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         font-size: 18px;
         padding-bottom: 8px;
     }
@@ -243,7 +249,7 @@ h3 {
     height: auto;
     padding-right: 16px;
 
-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
         width: 96px;
     }
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_box.scss

@@ -1,3 +1,6 @@
+@use "breakpoints";
+@use "colors";
+
 .box {
     width: 100%;
 }
@@ -13,7 +16,7 @@
     color: white;
     text-align: center;
     text-decoration: none;
-    background-color: $color-brand-secondary;
+    background-color: colors.$color-brand-secondary;
     border: none;
     width: 100%;
     font-size: 20px;
@@ -23,18 +26,18 @@
 
 .box__content {
     padding: 32px 16px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
     color: white;
 }
 
 .box__form {
     display: none;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         display: block;
         width: 100%;
         height: auto;
-        fill: $color-brand-primary;
+        fill: colors.$color-brand-primary;
     }
 
     &--top {
@@ -52,7 +55,7 @@
     font-size: 16px;
     line-height: 32px;
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         font-size: 20px;
         line-height: 32px;
 
@@ -66,7 +69,7 @@
 .box__nav {
     margin-top: -32px;
     padding-bottom: 32px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
 }
 
 .box__nav__item {
@@ -78,7 +81,7 @@
 
     &--active,
     &:hover {
-        background-color: $color-brand-light;
+        background-color: colors.$color-brand-light;
     }
 }
 

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_brands.scss

@@ -1,6 +1,9 @@
+@use "breakpoints";
+@use "colors";
+
 .brands {
     padding-top: 32px;
-    border-top: 1px solid $color-divider;
+    border-top: 1px solid colors.$color-divider;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
@@ -9,7 +12,7 @@
 .brands__item {
     width: 50%;
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         width: 25%;
     }
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_breakpoints.scss

@@ -1,7 +1,9 @@
-$mq-breakpoints: (
-    mobile: $viewport-width-mobile,
-    tablet: $viewport-width-tablet,
-    desktop: $viewport-width-desktop
-);
+@use "variables";
 
-@import "~sass-mq";
+@forward "sass-mq" with (
+    $breakpoints: (
+        mobile: variables.$viewport-width-mobile,
+        tablet: variables.$viewport-width-tablet,
+        desktop: variables.$viewport-width-desktop
+    )
+);

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_buttons.scss

@@ -1,3 +1,7 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+
 .button {
     display: inline-block;
     font-weight: 700;
@@ -5,7 +9,7 @@
 
     &--default {
       display: inline-block;
-      background-color: $color-brand-primary;
+      background-color: colors.$color-brand-primary;
       color: white;
       padding: 4px 16px;
     }
@@ -13,7 +17,7 @@
     &--page-header {
           display: block;
           min-width: 186px;
-          background-color: $color-brand-primary;
+          background-color: colors.$color-brand-primary;
           color: white;
           font-size: 18px;
           padding: 0 32px 0 24px;
@@ -26,14 +30,14 @@
         display: block;
         min-width: 220px;
         text-align: center;
-        background-color: $color-brand-primary;
-        @include sectionBackgroundsFromParent();
+        background-color: colors.$color-brand-primary;
+        @include mixins.sectionBackgroundsFromParent();
         color: white;
         line-height: 48px;
         border: none;
         outline: none;
 
-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
             box-shadow: 8px 8px 8px rgba(black, 0.2);
             font-size: 24px;
         }
@@ -43,7 +47,7 @@
         width: 100%;
         display: inline-block;
 
-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
             width: auto;
         }
     }
@@ -56,7 +60,7 @@
 
         &:hover {
             background: white;
-            color: $color-font-main;
+            color: colors.$color-font-main;
         }
     }
 
@@ -65,7 +69,7 @@
     }
 
     &--icon {
-        background-color: $color-brand-primary;
+        background-color: colors.$color-brand-primary;
         color: white;
         width: 16px;
         height: 16px;

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_card.scss

@@ -1,5 +1,8 @@
+@use "breakpoints";
+@use "mixins";
+
 .card {
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         &:not(.card--no-form) {
             padding-bottom: 48px;
         }
@@ -20,12 +23,12 @@
     padding: 16px;
     color: white;
     text-transform: uppercase;
-    @include sectionBackgrounds(0.75);
+    @include mixins.sectionBackgrounds(0.75);
     transition: background-color 0.25s ease-in-out;
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         .card:hover & {
-            @include sectionBackgrounds();
+            @include mixins.sectionBackgrounds();
         }
     }
 }
@@ -33,7 +36,7 @@
 .card__form {
     display: none;
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         display: block;
         opacity: 0;
         transition: opacity 0.25s ease-in-out;
@@ -50,7 +53,7 @@
     }
 
     polygon {
-        @include sectionFills();
+        @include mixins.sectionFills();
     }
 }
 

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_carousel.scss

@@ -1,21 +1,25 @@
+@use "colors";
+@use "mixins";
+@use "variables";
+
 .carousel {
 
     &--background {
-        background-color: $color-background;
+        background-color: colors.$color-background;
         padding-bottom: 48px;
         margin-bottom: 8px;
     }
 
-    @include sectionBackgrounds(0.25);
+    @include mixins.sectionBackgrounds(0.25);
 }
 
 .carousel__outer {
-    @include container($viewport-width-max);
+    @include mixins.container(variables.$viewport-width-max);
     position: relative;
 }
 
 .carousel__inner {
-    @include container($content-width-max);
+    @include mixins.container(variables.$content-width-max);
 }
 
 .carousel__item {
@@ -36,7 +40,7 @@
     height: 32px;
 
     fill: white;
-    @include sectionColoursFromParent;
+    @include mixins.sectionColoursFromParent;
 
     &--prev {
         left: -5px;
@@ -59,7 +63,7 @@
     }
 
     .testimonials & {
-        fill: $color-brand-primary;
+        fill: colors.$color-brand-primary;
     }
 }
 

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_colors.scss

@@ -1,8 +1,10 @@
+@use "sass:color";
+
 //$color-brand-primary: #0084d4;
 $color-brand-primary: #19a0d2;
 $color-brand-secondary: #1e314b;
 $color-brand-light: #8CCFE8;
-$color-background: lighten(#dbdee2, 5%);
+$color-background: color.adjust(#dbdee2, $lightness: 5%);
 
 $color-font-main: #1e314b;
 $color-divider: rgba($color-background, 0.8);

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_configurator.scss

@@ -1,3 +1,6 @@
+@use "breakpoints";
+@use "colors";
+
 .configurator {
     background: url(../images/bg_configurator.jpg) no-repeat top left;
     background-size: cover;
@@ -39,7 +42,7 @@
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-    background-color: rgba($color-brand-secondary, 0.85);
+    background-color: rgba(colors.$color-brand-secondary, 0.85);
     color: white;
 }
 
@@ -51,7 +54,7 @@
     display: none;
     color: white;
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         display: block;
     }
 }
@@ -83,11 +86,11 @@
     text-decoration: none;
     text-transform: uppercase;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         flex-wrap: nowrap;
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         align-items: center;
     }
 }
@@ -98,12 +101,12 @@
     margin-bottom: 8px;
     font-weight: 700;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         width: 30%;
         margin-bottom: 0;
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         width: 20%;
         margin-bottom: 0;
     }
@@ -113,11 +116,11 @@
     width: 100%;
     padding-right: 40px;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         width: 70%;
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         width: 80%;
     }
 }
@@ -131,11 +134,11 @@
     font-size: 14px;
     font-weight: 700;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         font-size: 16px;
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         margin-bottom: 0;
     }
 }
@@ -151,13 +154,13 @@
     text-decoration: none;
     text-align: center;
     color: white;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
     border-radius: 16px;
     font-family: "fontello";
 
     &.closed {
         background-color: white;
-        color: $color-brand-primary;
+        color: colors.$color-brand-primary;
 
         &:before {
             content: '\e800';
@@ -204,7 +207,7 @@
         margin-bottom: 8px;
     }
 
-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
         width: 50%;
 
         .active & {
@@ -212,7 +215,7 @@
         }
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         width: 25%;
 
         .active & {
@@ -240,10 +243,10 @@
     }
 
     .selected &:after {
-        background-color: rgba($color-brand-secondary, 0.75);
+        background-color: rgba(colors.$color-brand-secondary, 0.75);
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         &:hover:after {
             content: "";
             width: 100%;
@@ -251,7 +254,7 @@
             position: absolute;
             top: 0;
             left: 0;
-            background-color: rgba($color-brand-primary, 0.5);
+            background-color: rgba(colors.$color-brand-primary, 0.5);
         }
     }
 
@@ -260,12 +263,12 @@
         background-position: center 32px;
         background-size: 96px;
 
-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
             background-position: center 16px;
             background-size: 128px;
         }
 
-        @include mq($from: desktop) {
+        @include breakpoints.mq($from: desktop) {
             background-position: center 8px;
             background-size: 96px;
         }
@@ -382,7 +385,7 @@
     flex-wrap: wrap;
     justify-content: space-between;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         flex-wrap: nowrap;
     }
 }
@@ -391,7 +394,7 @@
     width: 100%;
     padding-bottom: 16px;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         width: 66.6666%;
         padding-right: 32px;
     }
@@ -401,7 +404,7 @@
     width: 100%;
     padding-bottom: 16px;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         width: 33.3333%;
     }
 }
@@ -456,7 +459,7 @@
     line-height: 32px;
     text-align: center;
     background-color: white;
-    color: $color-brand-primary;
+    color: colors.$color-brand-primary;
     border-radius: 16px;
     font-family: 'fontello';
 

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_cookiefirst.scss

@@ -1,3 +1,6 @@
+// .headline* live in _base.scss; @extend needs that module loaded explicitly.
+@use "base";
+
 .cookiefirst {
     h2 {
         @extend .headline;

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_forms.scss

@@ -1,10 +1,14 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+
 .form {
   margin: 0;
   padding: 0;
   position: relative;
   max-width: 100%;
 
-  @include mq($from: desktop) {
+  @include breakpoints.mq($from: desktop) {
     &:not(&--horizontal) {
       max-width: 75%;
     }
@@ -16,7 +20,7 @@
 
   &--horizontal {
     width: 100%;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -42,7 +46,7 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    background-color: $color-brand-light;
+    background-color: colors.$color-brand-light;
     color: white;
     border-radius: 8px;
   }
@@ -50,7 +54,7 @@
   &--mobile {
     display: block;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
       display: none;
     }
   }
@@ -58,7 +62,7 @@
   &--tablet {
     display: none;
 
-    @include mq($from: tablet, $until: desktop) {
+    @include breakpoints.mq($from: tablet, $until: desktop) {
       display: block;
     }
   }
@@ -66,7 +70,7 @@
   &--desktop {
     display: none;
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
       display: block;
     }
   }
@@ -79,7 +83,7 @@
       padding-top: 20px;
     }
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
       width: 33.3333%;
     }
   }
@@ -88,20 +92,20 @@
 .form__item__error {
   padding: 8px;
   font-size: 90%;
-  color: $color-formerror;
+  color: colors.$color-formerror;
 }
 
 .form__field {
-  @include nooutline;
+  @include mixins.nooutline;
   border: none;
   border-radius: 8px;
   width: 100%;
   padding: 8px 16px;
   color: white;
-  background-color: $color-brand-light;
+  background-color: colors.$color-brand-light;
 
   .form--box & {
-    background-color: $color-brand-light;
+    background-color: colors.$color-brand-light;
     color: white;
   }
 
@@ -114,10 +118,10 @@
     display: block;
     padding: 8px;
     width: 100%;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
       width: 50%;
     }
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
       width: 25%;
     }
   }
@@ -127,7 +131,7 @@
   }
 
   .has-errors & {
-    border: 1px solid $color-formerror;
+    border: 1px solid colors.$color-formerror;
   }
 }
 
@@ -158,7 +162,7 @@
   display: block;
   width: 100%;
   color: white;
-  background-color: $color-brand-secondary;
+  background-color: colors.$color-brand-secondary;
   border: none;
   font-weight: 700;
   text-decoration: none;
@@ -166,7 +170,7 @@
   padding: 8px 32px;
   margin-bottom: 16px;
 
-  @include mq($from: tablet) {
+  @include breakpoints.mq($from: tablet) {
     display: inline-block;
     width: auto;
     margin-bottom: 0;
@@ -189,10 +193,10 @@
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  background-color: rgba($color-divider, 0.75);
+  background-color: rgba(colors.$color-divider, 0.75);
 
   .form--box & {
-    background-color: rgba($color-brand-primary, 0.75);
+    background-color: rgba(colors.$color-brand-primary, 0.75);
   }
 }
 

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_helpernav.scss

@@ -1,7 +1,10 @@
+@use "breakpoints";
+@use "colors";
+
 .helpernav {
     display: none;
 
-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
         display: block;
         position: relative;
     }
@@ -24,7 +27,7 @@
     z-index: 10;
     min-width: 300px;
     padding: 16px 32px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
 }
 
 .helpernav__item {
@@ -32,7 +35,7 @@
   &:hover:not(.helpernav__item--disabled) {
 
     & > .helpernav__link {
-      background-color: $color-brand-primary;
+      background-color: colors.$color-brand-primary;
     }
 
     & > .helpernav__subnav {

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_herounit.scss

@@ -1,11 +1,16 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+@use "variables";
+
 .herounit {
     position: relative;
     width: 100%;
-    max-width: $viewport-width-max;
+    max-width: variables.$viewport-width-max;
     margin: 0 auto;
 
     &--indent {
-        max-width: $content-width-max - 16px;
+        max-width: variables.$content-width-max - 16px;
     }
 }
 
@@ -16,22 +21,22 @@
 
     height: 240px;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         height: 384px;
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         height: 420px;
     }
 
     .herounit--large & {
         height: 300px;
 
-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
             height: 480px;
         }
 
-        @include mq($from: desktop) {
+        @include breakpoints.mq($from: desktop) {
             height: 700px;
         }
     }
@@ -39,7 +44,7 @@
     .herounit--indent & {
         height: 320px;
 
-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
             height: 480px;
         }
     }
@@ -48,7 +53,7 @@
 .herounit__mask {
     display: none;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         position: absolute;
         z-index: 10;
         top: 0;
@@ -67,9 +72,9 @@
     width: 100%;
     height: 100%;
     padding: 32px;
-    background-color: rgba($color-brand-secondary, 0.2);
+    background-color: rgba(colors.$color-brand-secondary, 0.2);
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         background-color: transparent;
         padding: 64px 16px 0 96px;
         max-width: 45%;
@@ -83,7 +88,7 @@
     font-size: 32px;
     line-height: 95%;
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         font-size: 48px;
     }
 
@@ -101,10 +106,10 @@
         span {
             font-weight: 700;
             text-transform: uppercase;
-            color: $color-brand-primary;
+            color: colors.$color-brand-primary;
         }
 
-        @include mq($from: desktop) {
+        @include breakpoints.mq($from: desktop) {
             font-size: 56px;
         }
     }
@@ -120,7 +125,7 @@
     color: white;
     text-transform: none;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         font-size: 20px;
     }
 
@@ -128,12 +133,12 @@
         font-size: 22px;
         font-weight: 700;
 
-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
             font-size: 24px;
             padding-bottom: 48px;
         }
 
-        @include mq($from: desktop) {
+        @include breakpoints.mq($from: desktop) {
             font-size: 32px;
             padding-bottom: 96px;
         }
@@ -146,7 +151,7 @@
     line-height: 120%;
     color: white;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         display: block;
     }
 }
@@ -154,7 +159,7 @@
 .herounit__icon {
     display: none;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         display: block;
         width: 100%;
         height: auto;
@@ -173,11 +178,11 @@
     left: 50%;
     transform: translateX(-50%);
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         top: 85%;
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -190,34 +195,34 @@
     height: 48px;
     border: none;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         display: block;
     }
 
     & > polygon {
-        fill: $color-brand-primary;
-        @include sectionFills();
+        fill: colors.$color-brand-primary;
+        @include mixins.sectionFills();
     }
 }
 
 #gradient__from {
-    stop-color: $color-brand-secondary;
+    stop-color: colors.$color-brand-secondary;
 }
 
 #gradient__to {
     .section-default & {
-        stop-color: $color-brand-primary;
+        stop-color: colors.$color-brand-primary;
     }
     .section-incentives & {
-        stop-color: $color-incentives;
+        stop-color: colors.$color-incentives;
     }
     .section-teambuilding & {
-        stop-color: $color-teambuilding;
+        stop-color: colors.$color-teambuilding;
     }
     .secolor-meeting & {
-        stop-color: $color-meetings;
+        stop-color: colors.$color-meetings;
     }
     .secolor-events & {
-        stop-color: $color-events;
+        stop-color: colors.$color-events;
     }
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_iconbar.scss

@@ -1,9 +1,12 @@
+@use "breakpoints";
+@use "colors";
+
 .iconbar {
     @apply hidden lg:block fixed z-100 top-[30vh] right-0 overflow-hidden;
 }
 .iconbar {
     display: none;
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         display: block;
     }
     position: fixed;
@@ -20,7 +23,7 @@
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    background-color: $color-brand-light;
+    background-color: colors.$color-brand-light;
     margin-bottom: 2px;
 
     &:hover {
@@ -30,7 +33,7 @@
 
 .iconbar__icon {
     padding: 4px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
 
     svg {
         display: block;

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_iconnav.scss

@@ -1,3 +1,6 @@
+@use "breakpoints";
+@use "mixins";
+
 .iconnav {
     display: flex;
     flex-wrap: wrap;
@@ -21,7 +24,7 @@
         opacity: 1;
     }
 
-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
         width: 25%;
     }
 }
@@ -36,5 +39,5 @@
 .iconnav__label {
     text-transform: uppercase;
     font-weight: 700;
-    @include sectionColours();
+    @include mixins.sectionColours();
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_layout.scss

@@ -1,7 +1,10 @@
+@use "breakpoints";
+@use "mixins";
+
 main {
     padding-top: 96px;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         padding-top: 140px;
     }
 }
@@ -10,7 +13,7 @@ main {
     width: 100%;
     padding-top: 32px;
     padding-bottom: 32px;
-    @include clearfix();
+    @include mixins.clearfix();
 
     &.nopad {
         &--bottom {
@@ -23,18 +26,18 @@ main {
 }
 
 .content__title {
-    @include container();
+    @include mixins.container();
     text-align: center;
 }
 
 .content__inner {
-    @include container();
+    @include mixins.container();
 
     .content--has-sidebar & {
         display: flex;
         flex-wrap: wrap;
 
-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
             flex-wrap: nowrap;
         }
     }
@@ -45,40 +48,40 @@ main {
     padding: 0 0 32px;
     overflow: hidden;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         padding: 0;
     }
 }
 
 .content__plain {
-    @include clearfix();
-    @include mq($from: tablet) {
+    @include mixins.clearfix();
+    @include breakpoints.mq($from: tablet) {
         padding-right: 96px;
     }
 }
 
 .content__background {
-    @include clearfix();
-    @include sectionBackgrounds(0.15);
+    @include mixins.clearfix();
+    @include mixins.sectionBackgrounds(0.15);
     padding: 24px 48px 24px 32px;
 }
 
 .content__float {
-  @include clearfix();
+  @include mixins.clearfix();
 }
 
 .content__sidebar {
     width: 100%;
     padding: 32px 0;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         flex: 0 0 320px;
         padding: 0 0 0 32px;
     }
 }
 
 .content__form {
-    @include sectionFills(0.15);
+    @include mixins.sectionFills(0.15);
     width: 100%;
     height: auto;
     display: block;
@@ -93,7 +96,7 @@ main {
 
 .desktop-only {
     display: none;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         display: block;
     }
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_mixins.scss

@@ -1,4 +1,6 @@
 @use "sass:math";
+@use "variables" as *;
+@use "colors" as *;
 
 @mixin clearfix {
     &::after {

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_mobilenav.scss

@@ -1,3 +1,6 @@
+@use "breakpoints";
+@use "colors";
+
 .mobilenav {
     position: fixed;
     z-index: 50;
@@ -7,10 +10,10 @@
     height: 0;
     padding-top: 96px;
     overflow: hidden;
-    background: rgba($color-brand-secondary, 0.9);
+    background: rgba(colors.$color-brand-secondary, 0.9);
     transition: height 0.25s ease-in-out;
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         display: none;
     }
 

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_news.scss

@@ -1,3 +1,5 @@
+@use "breakpoints";
+
 .news-entry {
   width: 100%;
   &:not(:last-child) {
@@ -13,7 +15,7 @@
   display: flex;
   flex-direction: column;
 
-  @include mq($from: desktop) {
+  @include breakpoints.mq($from: desktop) {
     flex-direction: row;
   }
 }
@@ -22,7 +24,7 @@
   width: 100%;
   margin-bottom: 8px;
 
-  @include mq($from: desktop) {
+  @include breakpoints.mq($from: desktop) {
     width: 50%;
   }
 }
@@ -39,7 +41,7 @@
 .news-entry__teaser {
   width: 100%;
 
-  @include mq($from: desktop) {
+  @include breakpoints.mq($from: desktop) {
     padding-left: 24px;
     width: 50%;
   }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_offerlist.scss

@@ -1,3 +1,5 @@
+@use "breakpoints";
+
 .offerlist {
   position: relative;
 }
@@ -13,7 +15,7 @@
 }
 
 .offerlist__teasers {
-  @include mq($from: tablet) {
+  @include breakpoints.mq($from: tablet) {
     display: flex;
     flex-wrap: wrap;
   }
@@ -24,13 +26,13 @@
   text-decoration: none;
   margin-bottom: 32px;
   display: block;
-  @include mq($from: mobile) {
+  @include breakpoints.mq($from: mobile) {
     display: flex;
   }
-  @include mq($from: tablet) {
+  @include breakpoints.mq($from: tablet) {
     width: 50%;
   }
-  @include mq($from: desktop) {
+  @include breakpoints.mq($from: desktop) {
     width: 33.3333%;
   }
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_page-footer.scss

@@ -1,25 +1,30 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+@use "variables";
+
 .page-footer {
     width: 100%;
-    background: linear-gradient(to right, $color-brand-secondary, $color-brand-primary);
+    background: linear-gradient(to right, colors.$color-brand-secondary, colors.$color-brand-primary);
     color: white;
     padding-top: 16px;
     padding-bottom: 16px;
 
-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
         padding-top: 48px;
         padding-bottom: 48px;
     }
 }
 
 .page-footer__inner {
-    @include container($content-width-max);
+    @include mixins.container(variables.$content-width-max);
     display: flex;
     align-items: flex-start;
     flex-wrap: wrap;
     justify-content: center;
     border-bottom: 1px solid white;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         padding-bottom: 48px;
     }
 }
@@ -33,14 +38,14 @@
         text-align: left;
     }
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         width: 20%;
     }
 
     &--hide-mobile {
         display: none;
 
-        @include mq($from: tablet) {
+        @include breakpoints.mq($from: tablet) {
             display: block;
         }
     }
@@ -60,14 +65,14 @@
 }
 
 .page-footer__bottom {
-    @include container($content-width-max);
+    @include mixins.container(variables.$content-width-max);
     padding-top: 32px;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     justify-content: space-around;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         align-items: flex-start;
         justify-content: space-between;
     }
@@ -76,7 +81,7 @@
 .page-footer__bottom__column {
     width: 100%;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         width: 33.3333%;
     }
 }
@@ -86,7 +91,7 @@
     justify-content: center;
     align-items: flex-start;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         justify-content: flex-start;
     }
 }
@@ -106,7 +111,7 @@
     font-weight: 700;
     text-align: center;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         text-align: left;
     }
 }
@@ -115,7 +120,7 @@
     text-align: center;
     padding-top: 32px;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         text-align: right;
         padding-top: 0;
     }
@@ -138,7 +143,7 @@
     text-align: center;
     padding-top: 32px;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         text-align: left;
         padding-top: 0;
     }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_page-header.scss

@@ -1,3 +1,7 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+
 .page-header {
     width: 100%;
     position: fixed;
@@ -5,28 +9,28 @@
     left: 0;
     z-index: 1000;
     background: white;
-    box-shadow: 0 2px 2px rgba($color-background, 0.5);
+    box-shadow: 0 2px 2px rgba(colors.$color-background, 0.5);
 }
 
 .page-header__bar {
-    background: linear-gradient(to right, $color-brand-primary 50%, $color-brand-secondary);
+    background: linear-gradient(to right, colors.$color-brand-primary 50%, colors.$color-brand-secondary);
 }
 
 .page-header__bar__main {
-    @include container();
+    @include mixins.container();
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         justify-content: space-between;
     }
 }
 
 .page-header__bar__search {
     display: none;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         display: block;
         width: 50%;
     }
@@ -37,7 +41,7 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         width: 50%;
         justify-content: flex-end;
     }
@@ -53,14 +57,14 @@
 .page-header__bar__divider {
     display: none;
 
-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
         display: inline-block;
         padding: 12px 8px;
     }
 }
 
 .page-header__main {
-    @include container();
+    @include mixins.container();
     padding: 16px;
     display: flex;
     display: -ms-flexbox;
@@ -68,11 +72,11 @@
     align-items: center;
     -ms-flex-align: center;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         padding: 32px 16px 24px;
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         justify-content: space-between;
         align-items: baseline;
         -ms-flex-align: end;
@@ -98,7 +102,7 @@
 .page-header__sitenav {
     display: none;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         display: block;
     }
 }
@@ -106,7 +110,7 @@
 .page-header__button {
     display: none;
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         position: relative;
         display: block;
         min-width: 220px;
@@ -128,6 +132,6 @@
     border: none;
 
     & > polygon {
-        fill: $color-brand-primary;
+        fill: colors.$color-brand-primary;
     }
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_paginator.scss

@@ -1,3 +1,5 @@
+@use "colors";
+
 .paginator {
     list-style: none;
     margin: 0;
@@ -10,7 +12,7 @@
 
 .paginator__item {
     display: inline-block;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
     color: white;
     padding: 4px;
     text-decoration: none;
@@ -19,8 +21,8 @@
     }
 
     &--current {
-        border: 1px solid $color-brand-primary;
+        border: 1px solid colors.$color-brand-primary;
         background-color: white;
-        color: $color-brand-primary;
+        color: colors.$color-brand-primary;
     }
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_search.scss

@@ -1,24 +1,27 @@
+@use "breakpoints";
+@use "mixins";
+
 .searchresult {}
 
 .searchresult__info {
-    @include container();
+    @include mixins.container();
 }
 
 .searchresult-item {
     text-decoration: none;
     margin-bottom: 32px;
     display: block;
-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
         display: flex;
     }
 }
 
 .searchresult-item__card {
     width: 100%;
-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
         width: 240px;
     }
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         width: 33.3333%;
     }
 }
@@ -27,8 +30,8 @@
     margin: 0 8px;
     padding: 32px;
     color: white;
-    @include sectionBackgrounds();
-    @include mq($from: mobile) {
+    @include mixins.sectionBackgrounds();
+    @include breakpoints.mq($from: mobile) {
         margin: 0;
         flex: 1;
     }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_sitenav.scss

@@ -1,5 +1,8 @@
+@use "breakpoints";
+@use "mixins";
+
 .sitenav {
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         padding-right: 64px;
     }
 }
@@ -25,7 +28,7 @@
     &--active,
     &:hover {
         border-bottom: 3px solid;
-        @include sectionColours();
+        @include mixins.sectionColours();
     }
 
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_slider.scss

@@ -1,3 +1,5 @@
+@use "breakpoints";
+
 .slider {}
 
 .slider__arrow {
@@ -38,7 +40,7 @@
         top: 30%;
     }
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         width: 16px;
         height: 16px;
     }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_statement.scss

@@ -1,11 +1,14 @@
+@use "breakpoints";
+@use "mixins";
+
 .statement {
-    @include container();
+    @include mixins.container();
     padding-top: 32px;
     padding-bottom: 48px;
 }
 
 .statement__inner {
-    @include sectionBackgrounds();
+    @include mixins.sectionBackgrounds();
     box-shadow: 0 5px 10px rgba(black, 0.2);
     text-align: center;
     padding-top: 48px;
@@ -18,7 +21,7 @@
     font-size: 24px;
     line-height: 105%;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         font-size: 48px;
     }
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_team.scss

@@ -1,3 +1,6 @@
+@use "breakpoints";
+@use "colors";
+
 .team {
     display: flex;
     justify-content: space-between;
@@ -12,11 +15,11 @@
     max-width: 400px;
     padding: 0 16px 64px;
 
-    @include mq($until: desktop) {
+    @include breakpoints.mq($until: desktop) {
       margin: 0 auto;
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         width: 50%;
         max-width: 100%;
     }
@@ -57,10 +60,10 @@
 
 .team__position {
     display: block;
-    color: $color-brand-primary;
+    color: colors.$color-brand-primary;
 }
 
 .team__contact__link {
     text-decoration: none;
-    color: $color-brand-primary;
+    color: colors.$color-brand-primary;
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_teasers.scss

@@ -1,12 +1,15 @@
+@use "breakpoints";
+@use "mixins";
+
 .teasers {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    @include sectionBackgrounds(0.15);
+    @include mixins.sectionBackgrounds(0.15);
     margin: 0 -16px 0;
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         flex-direction: row;
     }
 }
@@ -19,15 +22,15 @@
         cursor: pointer;
     }
 
-    @include mq($until: tablet) {
+    @include breakpoints.mq($until: tablet) {
         padding-bottom: 16px;
     }
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         width: 50%;
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         width: 33.3333%;
     }
 }
@@ -40,12 +43,12 @@
 }
 
 .teaser__caption {
-    @include sectionBackgroundsFromParent();
+    @include mixins.sectionBackgroundsFromParent();
     padding: 16px 16px 0;
 }
 
 .teaser__form {
-    @include sectionFills();
+    @include mixins.sectionFills();
     width: 100%;
     height: auto;
     display: block;

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_testimonial.scss

@@ -1,17 +1,20 @@
+@use "breakpoints";
+@use "colors";
+
 .testimonial {
     width: 100%;
     padding: 0 32px;
     text-align: center;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         font-size: 80%;
         width: 50%;
         &:not(:last-child) {
-            border-right: 1px solid $color-divider;
+            border-right: 1px solid colors.$color-divider;
         }
     }
 
-    @include mq($from: desktop) {
+    @include breakpoints.mq($from: desktop) {
         width: 25%;
     }
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_tiles.scss

@@ -1,3 +1,7 @@
+@use "breakpoints";
+@use "colors";
+@use "mixins";
+
 .tiles {
     padding-bottom: 0;
 }
@@ -15,7 +19,7 @@
     padding: 16px;
     text-decoration: none;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         width: 50%;
         padding: 16px;
     }
@@ -26,12 +30,12 @@
     background-size: cover;
     background-position: center;
 
-    @include mq($from: mobile) {
+    @include breakpoints.mq($from: mobile) {
         min-height: 250px;
         padding: 32px;
     }
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         padding: 32px 32px 0;
         min-height: 375px;
     }
@@ -42,33 +46,33 @@
     color: white;
     text-align: center;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         width: 70%;
         margin: 0 auto;
     }
 }
 
 .tile__caption__inner {
-    @include sectionBackgrounds(0.75);
+    @include mixins.sectionBackgrounds(0.75);
     width: 100%;
     padding: 24px 0;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         padding: 32px 0;
 
         .tile:hover .section-incentives & {
-            background-color: $color-incentives;
+            background-color: colors.$color-incentives;
         }
         .tile:hover .section-teambuilding & {
-            background-color: $color-teambuilding;
+            background-color: colors.$color-teambuilding;
         }
 
         .tile:hover .section-meetings & {
-            background-color: $color-meetings;
+            background-color: colors.$color-meetings;
         }
 
         .tile:hover .section-events & {
-            background-color: $color-events;
+            background-color: colors.$color-events;
         }
     }
 }
@@ -77,7 +81,7 @@
     display: none;
     padding: 16px 32px 0;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         .tile:hover & {
             display: block;
         }
@@ -91,10 +95,10 @@
     margin-top: -1px;
 
     polygon {
-        @include sectionFills();
+        @include mixins.sectionFills();
     }
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         .tile:hover & {
             display: block;
         }
@@ -114,7 +118,7 @@
     font-weight: 700;
     min-height: 54px;
 
-    @include mq($from: tablet) {
+    @include breakpoints.mq($from: tablet) {
         font-size: 24px;
     }
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_video.scss

@@ -1,5 +1,7 @@
+@use "mixins";
+
 .video {
-    @include container();
+    @include mixins.container();
     padding-top: 32px;
     padding-bottom: 32px;
 }

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss

@@ -1,39 +1,39 @@
-@import "variables";
-@import "mixins";
-@import "breakpoints";
+@use "variables";
+@use "mixins";
+@use "breakpoints";
 
-@import "colors";
-@import "fonts";
+@use "colors";
+@use "fonts";
 
-@import "base";
-@import "buttons";
-@import "page-header";
-@import "page-footer";
-@import "layout";
-@import "sitenav";
-@import "helpernav";
-@import "mobilenav";
-@import "herounit";
-@import "carousel";
-@import "slider";
-@import "configurator";
-@import "statement";
-@import "testimonial";
-@import "brands";
-@import "iconbar";
-@import "tiles";
-@import "card";
-@import "box";
-@import "banner";
-@import "iconnav";
-@import "forms";
-@import "teasers";
-@import "badge";
-@import "team";
-@import "search";
-@import "offerlist";
-@import "paginator";
-@import "news";
-@import "datepicker";
-@import "cookiefirst";
-@import "video";
+@use "base";
+@use "buttons";
+@use "page-header";
+@use "page-footer";
+@use "layout";
+@use "sitenav";
+@use "helpernav";
+@use "mobilenav";
+@use "herounit";
+@use "carousel";
+@use "slider";
+@use "configurator";
+@use "statement";
+@use "testimonial";
+@use "brands";
+@use "iconbar";
+@use "tiles";
+@use "card";
+@use "box";
+@use "banner";
+@use "iconnav";
+@use "forms";
+@use "teasers";
+@use "badge";
+@use "team";
+@use "search";
+@use "offerlist";
+@use "paginator";
+@use "news";
+@use "datepicker";
+@use "cookiefirst";
+@use "video";

public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/rte.scss

@@ -1,18 +1,14 @@
-@import "mixins";
-@import "colors";
+@use "mixins";
+@use "colors";
 
 @font-face {
   font-family: 'Cairo';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url('../fonts/cairo-v2-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
   src: local('Cairo'), local('Cairo-Regular'),
-  url('../fonts/cairo-v2-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/cairo-v2-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/cairo-v2-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/cairo-v2-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/cairo-v2-latin-ext_latin-regular.svg#Cairo') format('svg'); /* Legacy iOS */
+  url('../fonts/cairo-v2-latin-ext_latin-regular.woff2') format('woff2'),
+  url('../fonts/cairo-v2-latin-ext_latin-regular.woff') format('woff');
 }
 
 @font-face {
@@ -20,13 +16,9 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url('../fonts/cairo-v2-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
   src: local('Cairo Bold'), local('Cairo-Bold'),
-  url('../fonts/cairo-v2-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/cairo-v2-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/cairo-v2-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/cairo-v2-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/cairo-v2-latin-ext_latin-700.svg#Cairo') format('svg'); /* Legacy iOS */
+  url('../fonts/cairo-v2-latin-ext_latin-700.woff2') format('woff2'),
+  url('../fonts/cairo-v2-latin-ext_latin-700.woff') format('woff');
 }
 
 $font-main: 'Cairo';
@@ -34,12 +26,8 @@ $font-main: 'Cairo';
 @font-face {
   font-family: 'fontello';
   font-display: swap;
-  src: url('../fonts/fontello.eot?39986861');
-  src: url('../fonts/fontello.eot?39986861#iefix') format('embedded-opentype'),
-  url('../fonts/fontello.woff2?39986861') format('woff2'),
-  url('../fonts/fontello.woff?39986861') format('woff'),
-  url('../fonts/fontello.ttf?39986861') format('truetype'),
-  url('../fonts/fontello.svg?39986861#fontello') format('svg');
+  src: url('../fonts/fontello.woff2?39986861') format('woff2'),
+  url('../fonts/fontello.woff?39986861') format('woff');
   font-weight: normal;
   font-style: normal;
 }
@@ -123,7 +111,7 @@ ul {
       left: 0;
       content: "\25CF";
       font-size: 18px;
-      @include sectionColoursFromParent();
+      @include mixins.sectionColoursFromParent();
     }
   }
 }
@@ -141,8 +129,8 @@ p {
 hr {
   max-width: 25%;
   margin: 32px auto 32px 0;
-  color: $color-ruler;
-  background-color: $color-ruler;
+  color: colors.$color-ruler;
+  background-color: colors.$color-ruler;
   height: 1px;
   border: none;
 }
@@ -158,7 +146,7 @@ h3,
 }
 
 .headline {
-  @include sectionColoursFromParent();
+  @include mixins.sectionColoursFromParent();
 
   &--icon {
     display: flex;
@@ -192,9 +180,9 @@ h1,
     display: block;
     font-size: 16px;
     line-height: 120%;
-    color: $color-brand-primary;
+    color: colors.$color-brand-primary;
     text-transform: none;
-    @include sectionColoursFromParent();
+    @include mixins.sectionColoursFromParent();
 
     &--box {
       color: white;
@@ -229,7 +217,7 @@ h3 {
 
   &--default {
     display: inline-block;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
     color: white;
     padding: 4px 16px;
   }
@@ -237,7 +225,7 @@ h3 {
   &--page-header {
     display: block;
     min-width: 186px;
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
     color: white;
     font-size: 18px;
     padding: 0 32px 0 24px;
@@ -250,8 +238,8 @@ h3 {
     display: block;
     min-width: 220px;
     text-align: center;
-    background-color: $color-brand-primary;
-    @include sectionBackgroundsFromParent();
+    background-color: colors.$color-brand-primary;
+    @include mixins.sectionBackgroundsFromParent();
     color: white;
     line-height: 48px;
     border: none;
@@ -271,7 +259,7 @@ h3 {
 
     &:hover {
       background: white;
-      color: $color-font-main;
+      color: colors.$color-font-main;
     }
   }
 
@@ -280,7 +268,7 @@ h3 {
   }
 
   &--icon {
-    background-color: $color-brand-primary;
+    background-color: colors.$color-brand-primary;
     color: white;
     width: 16px;
     height: 16px;