$header-bg-color: var(--color-grey-xl) !default;
$font-heading: sans-serif !default;
$font-weight: 700 !default;
@mixin header {
header {
display: grid;
grid-template-rows: 1.75rem 3.5rem;
grid-column: 2 / 4;
overflow: hidden;
svg {
grid-column: 1 / -1;
grid-row: 1 / -1;
place-self: stretch;
text {
transform: translate(-1rem, 7.25rem);
font-size: 10rem;
font-weight: 1000;
font-family: $font-heading;
fill: $header-bg-color;
}
}
> div {
grid-row: 2;
grid-column: 1 / -1;
display: grid;
grid-column-gap: 1rem;
grid-template-columns: auto max-content max-content;
.header-title {
h1 {
margin: 0;
padding: 0 1rem;
a, a:visited {
border-bottom: none;
color: var(--colour-black);
font-family: $font-heading;
font-size: 2.5rem;
font-size: 32px;
font-weight: $font-weight;
margin: 0;
padding: 0;
text-decoration: none;
}
}
}
}
}
}
header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--color-grey-xl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}