63 lines
1.1 KiB
CSS
63 lines
1.1 KiB
CSS
.hero {
|
|
text-align: center;
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
font-size: 48px;
|
|
|
|
&.hero__title--color-normal {
|
|
color: inherit;
|
|
}
|
|
|
|
&.hero__title--color-accent1 {
|
|
color: var(--color-brand-accent);
|
|
}
|
|
|
|
&.hero__title--color-accent2 {
|
|
color: var(--color-brand-accent2);
|
|
}
|
|
|
|
@container (max-width: 420px) {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
|
|
.hero__subtitle {
|
|
font-size: 32px;
|
|
|
|
@container (max-width: 420px) {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
h1,
|
|
.hero__subtitle {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
&.hero--color-text-fg-on-text-bg {
|
|
background-color: var(--color-brand-text-bg);
|
|
color: var(--color-brand-text-fg);
|
|
}
|
|
|
|
&.hero--color-text-accent-on-text-bg {
|
|
background-color: var(--color-brand-text-bg);
|
|
color: var(--color-brand-text-accent);
|
|
}
|
|
|
|
&.hero--color-text-accent2-on-text-bg {
|
|
background-color: var(--color-brand-text-bg);
|
|
color: var(--color-brand-text-accent2);
|
|
}
|
|
|
|
&.hero--color-text-on-accent-on-accent {
|
|
background-color: var(--color-brand-accent);
|
|
color: var(--color-brand-text-on-accent);
|
|
}
|
|
|
|
&.hero--color-text-on-accent2-on-accent2 {
|
|
background-color: var(--color-brand-accent2);
|
|
color: var(--color-brand-text-on-accent2);
|
|
}
|
|
}
|