It's been tricky but got there finally! Hello `:global` - Avoid using one global CSS file containing everything - Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used
32 lines
551 B
SCSS
32 lines
551 B
SCSS
.heading {
|
|
overflow: hidden;
|
|
text-align: center;
|
|
color: $color-tertiary;
|
|
|
|
@include bp (sm) {
|
|
margin-bottom: 128px;
|
|
}
|
|
|
|
// Title
|
|
:global(h1) {
|
|
margin-top: 56px;
|
|
line-height: 1;
|
|
color: $color-secondary;
|
|
|
|
@include bp (sm) {
|
|
margin-top: 160px;
|
|
}
|
|
}
|
|
|
|
// Text
|
|
:global(p) {
|
|
max-width: 300px;
|
|
margin: 40px auto 0;
|
|
font-weight: 200;
|
|
|
|
@include bp (sm) {
|
|
max-width: 600px;
|
|
margin-top: 72px;
|
|
}
|
|
}
|
|
} |