first commit

wp-content/themes/ostal_WP/sass/02-abstracts/_helpers.scss

@@ -0,0 +1,65 @@
+@use "../01-base/breakpoints" as *;
+@use "../01-base/colors" as *;
+
+.wrapper--inner{
+    padding: 0 2rem;
+    margin: 0 auto;
+    @include responsive(tablet){
+        padding: 0 4rem;
+        max-width: inherit;
+    }
+    @include responsive(desktop){
+        padding: 0 0;
+        max-width: 1200px;
+    }
+}
+
+.wrapper--default{
+    padding: 30px 0;
+    @include responsive(tablet){
+        padding: 40px 0;
+    }
+    @include responsive(desktop){
+        padding: 50px 0;
+    }
+}
+
+.text-accent{
+    color: $accent-color;
+    &--lighten{
+        color: lighten($accent-color, 20%);
+    }
+    &--darken{
+        color: darken($accent-color, 20%);
+    }
+}
+.text-black{
+    color: $dark-color;
+    &--lighten{
+        color: lighten($dark-color, 20%);
+    }
+    &--darken{
+        color: darken($dark-color, 20%);
+    }
+}
+.text-white{
+    color: $white-color;
+    &--lighten{
+        color: lighten($white-color, 20%);
+    }
+    &--darken{
+        color: darken($white-color, 20%);
+    }
+}
+
+.top-margin-minus{
+    margin-top: -46px;
+    .wrapper{
+        padding-top: 46px;
+    }
+}
+
+.img-auto{
+    width: 100%;
+    height: auto;
+}

wp-content/themes/ostal_WP/sass/02-abstracts/_index.scss

@@ -0,0 +1,4 @@
+@forward 'variables';
+@forward 'mixins';
+@forward 'helpers';
+

wp-content/themes/ostal_WP/sass/02-abstracts/_mixins.scss

@@ -0,0 +1,20 @@
+@use "../01-base/colors" as *;
+
+@mixin corner-box($percent){
+    clip-path: polygon(0% $percent, $percent 0%, 100% 0%, 100% $percent, 100% 100%, 0% 100%, 0% $percent);
+}
+
+@mixin bg-filter{
+    position: absolute;
+    background-color: $dark-color;
+    opacity: 97%;
+    display: block;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+@mixin bg-filter--gradient{
+    background: linear-gradient(119deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.00) 90%);
+}