add docs about the new atlantis function fluid-prop()

docs/ts-scss/atlantis/index.mdx

@@ -71,4 +71,5 @@ All available mixins:
 
 All available functions:
 
+- [`fluid-prop()`](library#functions/fluid/fluid-prop)
 - [`inline-svg()`](library#functions/svg/inline-svg)

docs/ts-scss/atlantis/library.mdx

@@ -313,11 +313,51 @@ Prevents wrapping of text by displaying ellipsis instead.
 
 
 ## Functions
+### Fluid
+#### `.fluid-prop()` {#functions/fluid/fluid-prop}
+
+```scss
+atlantis.fluid-prop($min-vw, $max-vw, $min-value, $max-value);
+```
+
+Returns a clamp function with calculated values, depending on the given params.
+
+* `$min-vw` -> viewport at which the value starts to be fluid
+* `$max-vw` -> viewport at which the value ends to be fluid
+* `$min-value` -> value at the beginning
+* `$max-value` -> value at the end
+
+Usage:
+
+```scss
+.element {
+	font-size: atlantis.fluid-prop(30rem, 140rem, 2rem, 4rem);
+}
+```
+
+We recommend for multiple uses, such as font-sizes that all have the same `$min-vw` and `$max-vw` value, to build a helper function that is then used for better readability when using the function. For example:
+
+```scss title="_mixins.scss"
+@use "~@21torr/atlantis/mixins" as atlantis;
+
+@function font-fluid-prop ($min-value, $max-value) {
+	@return atlantis.fluid-prop(30rem, 140rem, $min-value, $max-value);
+}
+```
+
+```scss title="element.scss"
+@use "mixins";
+
+.element {
+	font-size: mixins.font-fluid-prop(2rem, 4rem);
+}
+```
+
 ### SVG
 #### `.inline-svg()` {#functions/svg/inline-svg}
 
 ```scss
-@include atlantis.inline-svg($svg);
+atlantis.inline-svg($svg);
 ```
 
 Inlines the SVG on the element. Will return a `url()` element so it can be used directly as an image.