.asset-portfolio {
	background: var(--color-white);
	padding-block: var(--space-9);
}

.asset-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.asset-card {
	position: relative;
	height: 430px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background: var(--color-charcoal);
}

.asset-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.asset-card__media .aspegon-media,
.asset-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.asset-card__body {
	position: relative;
	z-index: 2;
	padding: var(--space-5);

	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.asset-card__body h3 {
	color: var(--color-white);
	font-weight: 400;
	margin-bottom: var(--space-2);
	font-size: 17px;
	line-height: 105%;
	letter-spacing: 0%;
}

.asset-card__body p {
	color: var(--color-white);
	margin-top: var(--space-3);
	margin-bottom: var(--space-5);
	font-weight: 400;
	font-size: 14px;
	line-height: 105%;
	letter-spacing: 0%;
}

.asset-card__hover-reveal {
	display: grid;
	grid-template-rows: 0fr;

	opacity: 0;
	visibility: hidden;

	transition:
		grid-template-rows 0.35s var(--ease-out, ease),
		opacity 0.25s ease,
		visibility 0s linear 0.35s;
}

.asset-card:hover .asset-card__hover-reveal {
	grid-template-rows: 1fr;

	opacity: 1;
	visibility: visible;

	transition:
		grid-template-rows 0.35s var(--ease-out, ease),
		opacity 0.25s ease,
		visibility 0s;
}

.asset-card__hover-reveal-inner {
	min-height: 0;
	overflow: hidden;
}

.asset-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-white);
	font-size: 13px;
	text-decoration: none;
}

.asset-card__link svg {
	transition: transform 0.25s ease;
}

.asset-card__link:hover svg {
	transform: translateX(4px);
}

.asset-card--coming-soon {
	background: radial-gradient(circle at 50% 40%, #7A2A9E 0%, #1A0B2E 75%);
	align-items: center;
	justify-content: center;
}

.asset-card__lock {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
}

.asset-card__lock span {
	font-weight: 400;
	font-size: 14px;
	line-height: 105%;
	letter-spacing: 0%;
}

@media (max-width: 768px) {
	.asset-portfolio__grid {
		grid-template-columns: 1fr;
	}
}