.Feat {
	display              : grid;
	grid-template-columns: 24px 1fr auto;
	align-items          : start;
	padding              : var(--space);
	gap                  : var(--space);

	&:hover {
		background     : #EEF4FB;
		text-decoration: none;
	}

	&>.rank {
		font-weight: 700;
		font-size  : 14px;
		font-family: var(--mono);
		line-height: 1.3;
	}

	&>.body {
		min-width: 0;

		&>.top {
			display    : inline-flex;
			align-items: center;
			gap        : var(--space-xs);
		}

		& .title {
			color      : var(--link);
			font-weight: 700;
			font-size  : 13.5px;
			line-height: 1.25;
		}

		&>.sub {
			display   : block;
			margin-top: var(--space-2xs);
			color     : var(--tx-mid);
			font-size : 11px;
		}
	}

	&>.meta {
		display       : flex;
		flex-direction: column;
		align-items   : flex-end;
		gap           : var(--space-2xs);
		white-space   : nowrap;
	}

	@media (max-width: 560px) {
		& {
			grid-template-columns: auto 1fr;
		}

		&>.meta {
			flex-direction: row;
			grid-column   : 2;
			align-items   : center;
			margin-top    : var(--space-2xs);
			gap           : var(--space-xs);
		}
	}
}