1 files changed, 39 insertions, 0 deletions

diff --git a/src/styles/components/_home-banner.scss b/src/styles/components/_home-banner.scss
new file mode 100644
index 0000000..660cd9b
--- /dev/null
+++ b/src/styles/components/_home-banner.scss
@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "sass:string";
+@use "sass:meta";
+
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:iro-design" as iro;
+
+@use "site-header.vars" as site-header;
+
+@mixin styles {
+        @include bem.component("home-banner") {
+                @include bem.elem("intro") {
+                        margin-block-start: 0;
+                        font-size: clamp(props.get(iro.$core--font-size--500), 5.3vw, 5rem);
+                        font-weight: 300;
+                        color: props.get(iro.$core--theme, --text);
+                        line-height: 1.2;
+
+                        strong {
+                                font-family: props.get(iro.$core--font--headline--family);
+                                font-weight: 900;
+                                text-transform: uppercase;
+                                letter-spacing: 2px;
+                                color: props.get(iro.$core--theme, --heading);
+                        }
+                }
+
+                @include iro.media--media("<=md") {
+                        @include bem.elem("intro") {
+                                font-size: props.get(iro.$core--font-size--500);
+                        }
+
+                        @include bem.elem("buttons") {
+                                justify-content: center;
+                        }
+                }
+        }
+}