@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;
			}
		}
	}
}