Skip to content
Snippets Groups Projects
Commit ef0a64bf authored by Stu Robson's avatar Stu Robson
Browse files

updates to make vf-intro have it's own grid layout defined

parent 108ae1a5
No related branches found
No related tags found
No related merge requests found
<div class="vf-intro">
<div class="vf-intro | embl-grid embl-grid--intro">
<h1 class="vf-intro__heading | vf-text--display vf-text--display-xl">Cancer</h1>
<p class="vf-lede | vf-text--display vf-text--display-l">Cancer is a generic term for lots of different diseases in which cells divide many more times than usual. This abnormal growth can affect many cell types in almost any part of the body.</p>
<p class="vf-intro__text | vf-text--body vf-text--body-r">Cancer is a multi-stage process. Normal cells begin to divide abnormally, spreading beyond their normal boundaries, and abnormal tissue growth causes swellings called tumours to form. Tumours can be benign – with no harmful effect on the body – or malignant, invading healthy tissue and interfering with normal bodily functions.</p>
<p class="vf-intro__text | vf-text--body vf-text--body-r">There are more than 100 types of cancer and symptoms vary depending on the type. <a href="JavaScript:Void(0);">Read more about Cancer</a>.</p>
<p class="vf-intro__text | vf-text--body vf-text--body-r">There are more than 100 types of cancer and symptoms vary depending on the type. <a href="JavaScript:Void(0);">Read more about Cancer</a></p>
</div>
......@@ -2,6 +2,8 @@
.vf-intro {
@include margin--block(bottom, 110px);
grid-column: main;
}
.vf-intro__heading {
......@@ -19,3 +21,13 @@
margin-bottom: 0;
}
}
.embl-grid--intro {
@media (min-width: 1024px) {
grid-template-columns: 250px 1fr;
grid-column-gap: 1.25em;
> * {
grid-column: 2;
}
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment