.download-section-feature__image { margin-bottom: $spacer-md; width: 100%; } .download-section-feature__title { margin-bottom: $spacer-sm; } .download-section-feature__caption { margin-bottom: $spacer-sm; } .resource-list { @extend %list-unstyled; display: flex; flex-direction: column; } .resource-list-item { display: flex; flex-direction: column; margin-bottom: $spacer-lg; width: 100%; } .resource-list-item-wrapper { display: flex; flex-direction: column; justify-content: space-between; background-color: $brand-secondary; padding: $spacer-md $spacer-sm; height: 100%; color: $brand-text-light; } .resource-list-item__body { padding-top: $spacer-xxl; } .resource-list-item__image { z-index: 2; margin: 0 auto $spacer-sm; margin-bottom: -$spacer-xxl; border: 3px solid $brand-white; width: 50%; } .resource-list-item__author { @extend %heading-font-regular; margin-bottom: $spacer-lg; padding-left: 0; color: $brand-primary; font-size: $font-size-base; > li { @extend %list-unstyled; margin-bottom: $spacer-xxs; > a { @extend %link-unstyled; &:focus, &:hover { @extend %heading-font-bold; background-color: $brand-text-light; } } } } .resource-list-item__title { margin-bottom: $spacer-xs; color: $brand-text-light; } .resource-list-item__caption { @extend %heading-font-regular; margin-bottom: $spacer-md; font-size: $font-size-base; } .resource-list-item__footer { display: flex; justify-content: space-between; .link-teaser { color: $brand-text-light; } } //Breakpoints @media screen and (min-width: $grid-breakpoint-md) { .resource-list { flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; } .resource-list-item { flex-grow: 1; margin-right: $spacer-xs; margin-left: $spacer-xs; min-width: ms(32); max-width: 30%; } }