diff --git a/src/scss/components/footer/_footer.scss b/src/scss/components/footer/_footer.scss index ba0a8ef..cf67103 100644 --- a/src/scss/components/footer/_footer.scss +++ b/src/scss/components/footer/_footer.scss @@ -31,7 +31,8 @@ } } -.iati-footer__section--first .iati-footer__container { +.iati-footer__section--first .iati-footer__container, +.iati-footer__section--mid .iati-footer__container { display: flex; gap: 2rem; flex-direction: column; @@ -41,6 +42,25 @@ } } +.iati-footer__section--mid .iati-footer-block:first-child { + @media (min-width: $screen-md) { + flex: 3; + } +} + +.iati-footer__section--mid .iati-footer-block:last-child { + @media (min-width: $screen-md) { + flex: 2; + } +} + +.iati-footer-block--bordered { + @media (min-width: $screen-md) { + border-inline-start: 1px solid $color-blue-30; + padding-inline-start: 2rem; + } +} + .iati-footer__section--last .iati-footer__container { display: flex; flex-wrap: wrap; @@ -68,6 +88,13 @@ } } +.iati-footer-block__subtitle { + margin: 0 0 0.75rem; + font-family: $font-stack-heading; + font-size: 1rem; + font-weight: 700; +} + .iati-footer-block__content { :where(p, li) { margin: 0; @@ -85,6 +112,11 @@ } } +.iati-footer-block__content--divided > *:not(:first-child) { + border-inline-start: 1px solid $color-blue-30; + padding-inline-start: 2rem; +} + .iati-footer__legal-nav { font-size: 1.0625rem; a { diff --git a/src/scss/components/footer/footer.stories.ts b/src/scss/components/footer/footer.stories.ts index fe06c89..ae16e59 100644 --- a/src/scss/components/footer/footer.stories.ts +++ b/src/scss/components/footer/footer.stories.ts @@ -76,34 +76,31 @@ export const UsefulLinksSection: Story = { }; const additionalInformationHtml = html` -