src/styles/components/_home-banner.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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;
			}
		}
	}
}