@use 'sass:map';
@use '../../../base/maps/tokens' as *;
@use '../../../base/mixins/breakpoints' as break;
@use '../../../base/layout' as *;

.hero {
	@extend .wide-wrapper;

	margin-bottom: var(--padding-huge);
	padding-top: calc(var(--padding-huge) + var(--padding-medium));
	padding-bottom: var(--padding-extra-large);
	position: relative;

	@include break.max-mobile {
		padding-top: calc(var(--padding-extra-large) + var(--padding-huge));
	}
}

// Used as a default background is no image in hero
.bg-radial-gradient-default {
	background: radial-gradient(
		113.24% 69.92% at 73.05% 11.07%,
		#070738 0%,
		#031573 50%,
		#01011e 100%
	);
}