.account-card__header { position: relative; } .explore__search-header { background: darken($ui-base-color, 4%); justify-content: center; align-items: center; padding: 15px; .search { width: 100%; margin-bottom: 0; } .search__input { border: 1px solid lighten($ui-base-color, 8%); padding: 10px; } .search__popout { border: 1px solid lighten($ui-base-color, 8%); } .search .icon { top: 9px; inset-inline-end: 10px; color: $dark-text-color; } } .explore__search-results { flex: 1 1 auto; display: flex; flex-direction: column; background: $ui-base-color; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .story { display: flex; align-items: center; color: $primary-text-color; text-decoration: none; padding: 15px; border-bottom: 1px solid lighten($ui-base-color, 8%); gap: 15px; &:last-child { border-bottom: 0; } &:hover, &:active, &:focus { color: $highlight-text-color; .story__details__publisher, .story__details__shared { color: $highlight-text-color; } } &__details { flex: 1 1 auto; &__publisher { color: $darker-text-color; margin-bottom: 8px; } &__title { font-size: 19px; line-height: 24px; font-weight: 500; margin-bottom: 8px; } &__shared { color: $darker-text-color; } strong { font-weight: 500; } } &__thumbnail { flex: 0 0 auto; position: relative; width: 120px; height: 120px; .skeleton { width: 100%; height: 100%; } img { border-radius: 8px; display: block; margin: 0; width: 100%; height: 100%; object-fit: cover; } &__preview { border-radius: 8px; display: block; margin: 0; width: 100%; height: 100%; object-fit: fill; position: absolute; top: 0; inset-inline-start: 0; z-index: 0; &--hidden { display: none; } } } &.expanded { flex-direction: column; .story__thumbnail { order: 1; width: 100%; height: auto; aspect-ratio: 1.91 / 1; } .story__details { order: 2; width: 100%; flex: 0 0 auto; } } }