.forward-blogroll {
	--forward-purple: #7a2ceb;
	--forward-purple-dark: #6d28d9;
	--forward-black: #010c25;
	--forward-gray: #414e71;
	--forward-dark-blue: #07102b;
	--forward-white: #ffffff;
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.forward-blogroll__item {
	background: var(--forward-dark-blue);
	border-radius: 8px;
	box-shadow: 0 18px 35px rgba(1, 12, 37, 0.18);
	color: var(--forward-white);
	display: grid;
	min-height: 360px;
	overflow: hidden;
	position: relative;
}

.forward-blogroll__item--no-image {
	background: linear-gradient(145deg, var(--forward-dark-blue), var(--forward-gray));
}

.forward-blogroll__image {
	filter: saturate(0.9);
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.forward-blogroll__item::after {
	background: linear-gradient(180deg, rgba(1, 12, 37, 0.12) 0%, rgba(1, 12, 37, 0.72) 50%, rgba(1, 12, 37, 0.92) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

.forward-blogroll__content {
	align-self: end;
	display: grid;
	gap: 14px;
	padding: 22px;
	position: relative;
	z-index: 1;
}

.forward-blogroll__title {
	color: var(--forward-white);
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
	font-weight: 750;
	line-height: 1.18;
	margin: 0;
	text-shadow: 0 2px 12px rgba(1, 12, 37, 0.35);
}

.forward-blogroll__meta {
	align-items: center;
	color: rgba(255, 255, 255, 0.78);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.95rem;
	font-weight: 650;
	gap: 8px;
}

.forward-blogroll__source {
	color: rgba(255, 255, 255, 0.86);
}

.forward-blogroll__button {
	align-self: start;
	background: var(--forward-purple);
	border-radius: 6px;
	color: var(--forward-white);
	display: inline-flex;
	font-weight: 750;
	justify-self: start;
	line-height: 1;
	padding: 13px 20px;
	text-decoration: none;
	transition: background-color 160ms ease, transform 160ms ease;
}

.forward-blogroll__button:hover,
.forward-blogroll__button:focus {
	background: var(--forward-purple-dark);
	color: var(--forward-white);
	transform: translateY(-1px);
}

.forward-blogroll__empty {
	background: var(--forward-white);
	border: 1px solid rgba(65, 78, 113, 0.22);
	border-radius: 8px;
	color: var(--forward-gray);
	padding: 18px 20px;
}

@media (prefers-color-scheme: dark) {
	.forward-blogroll {
		--forward-purple: #995bf5;
	}
	.forward-blogroll .forward-blogroll__button,
	.forward-blogroll .forward-blogroll__button:hover,
	.forward-blogroll .forward-blogroll__button:focus {
		color: var(--forward-black);
	}

	.forward-blogroll__empty {
		background: var(--forward-dark-blue);
		border-color: rgba(255, 255, 255, 0.18);
		color: var(--forward-white);
	}
}