.uol-results-items { padding-top: $spacing-4; padding-bottom: $spacing-4; } .uol-results-items__item { box-sizing: border-box; position: relative; display: flex; flex-direction: column; background: $color-grey--faded; margin-bottom: $spacing-4; padding: $spacing-4; border: 1px solid rgba($color-border--light, 0.6); transition: all 0.25s ease-in-out; @include media(">=uol-media-l") { margin-bottom: $spacing-5; padding: $spacing-5; flex-direction: row; } @include media(">=uol-media-xl") { margin-bottom: $spacing-6; padding: $spacing-6; } &:hover, &:focus-within { box-shadow: 0 15px 25px rgba($color-black--dark, 0.15), 0 5px 10px rgba($color-black--dark, 0.05); } } .uol-results-items__item--featured { margin-top: $spacing-5; &::before { content: ""; position: absolute; top: -2px; right: -1px; left: -1px; height: 2px; background: $color-black; } } .uol-results-items__item__featured { position: absolute; bottom: 100%; left: -1px; padding: $spacing-2 $spacing-4; background: $color-black; color: $color-white; @include media(">=uol-media-l") { padding: $spacing-2 $spacing-5; } @include media(">=uol-media-xl") { padding: $spacing-2 $spacing-6; } } .uol-results-items__item__text-container { flex: 1 1 auto; .uol-results-items__item--has-image & { @include media(">=uol-media-l") { flex-basis: calc(65% - #{$spacing-5}); } @include media(">=uol-media-xl") { flex-basis: calc(65% - #{$spacing-6}); } } } .uol-results-items__item__title { margin: 0 0 $spacing-3; } .uol-results-items__item__link { @extend .uol-typography-heading-4; text-decoration: none; &::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } &:hover, &:focus { text-decoration: underline; } } .uol-results-items__item__highlight { @extend .uol-typography-heading-6; margin-top: 0; margin-bottom: $spacing-4; display: block; color: $color-brand; } .uol-results-items__item__meta { @extend %text-size-caption; font-weight: $font-weight-medium--sans-serif; margin: 0 0 $spacing-2; } .uol-results-items__item__meta__group { margin-bottom: $spacing-2; line-height: 1.5rem; } .uol-results-items__item__meta__label { display: inline; font-weight: $font-weight-bold--sans-serif; &::after { content: ":"; } } .uol-results-items__item__meta__data { margin: 0; display: inline; &::after { content: ""; display: inline-block; position: relative; width: 1px; height: 0.8em; background-color: $color-brand; margin-left: 0.3em; margin-right: 0.15em; top: 0.1em; } &:last-of-type { &::after { content: none; } } } .uol-results-items__item__image-container { order: -1; position: relative; padding-bottom: 50%; height: 0; overflow: hidden; margin: -#{$spacing-4} -#{$spacing-4} $spacing-4 -#{$spacing-4}; flex: 1 1 auto; @include media(">=uol-media-l") { width: unset; flex-basis: 35%; padding-bottom: 18%; margin: 0 $spacing-5 0 0; } @include media(">=uol-media-xl") { margin: 0 $spacing-6 0 0; } } .uol-results-items__item__img { position: absolute; left: 0; top: 0; width: 100%; height: auto; } .uol-results-items__item__summary { @extend .uol-typography-paragraph-small; }