diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss index 1841ea59a475f6aa3a9dbe45e27644a7355e3b78..c5f3955caafbbc2f14776c6819bc515d4608fd87 100644 --- a/src/components/hy-hero/hy-hero.scss +++ b/src/components/hy-hero/hy-hero.scss @@ -586,20 +586,16 @@ } } -// TODO: Update this to use styles straight from DSLIB (Ingress). .hy-hero__description { - @include font-size(16px); + @include font-size(16px, 24px); color: var(--grayscale-black); font-family: var(--main-font-family); - font-weight: 600; - letter-spacing: -0.1px; - line-height: 22px; margin: 0; padding: 0; position: relative; @include breakpoint($narrow) { - line-height: 24px; + @include font-size(18px, 28px); } @include breakpoint($wide) { @@ -609,9 +605,7 @@ } @include breakpoint($extrawide) { - @include font-size(18px); - letter-spacing: -0.16px; - line-height: 26px; + @include font-size(18px, 32px); max-width: 37%; padding: 28px 20px 32px 0; } diff --git a/src/components/ingress/ingress.scss b/src/components/ingress/ingress.scss index b9653d45c7ab2a225af65c332400fb85dc3a1f4d..2034c8d492752343a2135911b37f6b1e81ce01a5 100644 --- a/src/components/ingress/ingress.scss +++ b/src/components/ingress/ingress.scss @@ -3,25 +3,29 @@ } p.hy-ingress { - color: var(--grayscale-dark); + @include font-size(16px, 24px); + color: var(--grayscale-black); font-family: var(--main-font-family); - font-size: 20px; - letter-spacing: -0.1px; - line-height: 32px; - margin: 0; - margin-bottom: 2rem; + margin: 0 0 2rem; + + @include breakpoint($narrow) { + @include font-size(18px, 28px); + } @include breakpoint($wide) { - margin-bottom: 2.25rem; + margin: 0 0 2.25rem; } + @include breakpoint($xlarge) { - margin-bottom: 3rem; + @include font-size(18px, 32px); + margin: 0 0 3rem; } // No sidebar, large desktop styles &__large { @include breakpoint($extrawide) { - margin-bottom: 3rem; + @include font-size(18px, 32px); + margin: 0 0 3rem; } } }