diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml index 311913ddd..1924ba7f0 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml @@ -20,4 +20,4 @@ tags: srcset_image: 'card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt=""': raw: | - \ No newline at end of file + diff --git a/tbx/static_src/sass/components/_featured-services.scss b/tbx/static_src/sass/components/_featured-services.scss index 8012045bd..b347cda7b 100644 --- a/tbx/static_src/sass/components/_featured-services.scss +++ b/tbx/static_src/sass/components/_featured-services.scss @@ -19,16 +19,16 @@ display: grid; gap: $spacer-mini-plus; grid-template-columns: repeat(1, 1fr); - + @include media-query(medium) { grid-template-columns: repeat(2, 1fr); } - + @include media-query(large) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } } - + &__card { display: flex; flex-direction: column; @@ -39,16 +39,19 @@ &:has(.button-link:hover) { background-color: var(--color--black); } + + @include high-contrast-mode() { + border: 1px solid var(--color--text); + } } &__text { padding: $spacer-small; margin-bottom: auto; } - + &__heading { color: var(--color--white); margin-bottom: $spacer-mini; } } -