link-peek { &:defined { & a:not([data-key]) { display: none; } & figure { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, max-content)); gap: 1rem; max-inline-size: max-content; border: 1px solid var(--gray-light); border-radius: var(--rounded); padding: 1rem; margin: 0 0 var(--sizing-base); font-size: var(--font-size-sm); line-height: var(--line-height-sm); } & a[data-key="data.title.link"], & figure p { font-size: var(--font-size-sm); line-height: var(--line-height-sm); } } & img { &[data-key="data.logo.url"] { margin-right: var(--sizing-xs); inline-size: var(--sizing-lg); block-size: var(--sizing-lg); vertical-align: middle; } &[data-key="data.image.url"] { max-inline-size: 100%; block-size: auto; border-radius: var(--rounded); } } }