.yc-abx {
	min-width:0;
	min-height:164px;
	display:flex;
	align-items:stretch;
	gap:17px;
	padding:12px;
	border:1px solid var(--diver);
	border-radius:var(--miniradius);
	background:var(--surface-color);
	box-shadow:0 8px 22px rgb(var(--primary-text-code) / 7%);
	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

.yc-abx-img {
	width:136px;
	min-height:138px;
	display:flex;
	flex:0 0 136px;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	border-radius:calc(var(--miniradius) - 3px);
	background:var(--media-placeholder);
}

.yc-abx-img img,
.yc-abx-img > span {
	width:100%;
	height:100%;
}

.yc-abx-img img {
	display:block;
	object-fit:cover;
}

.yc-abx-img > span {
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--uicolor);
	font-size:34px;
}

.yc-abx-cpy {
	min-width:0;
	display:flex;
	flex:1;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	padding:5px 3px;
}

.yc-abx h3 {
	min-width:0;
	margin:0 0 15px;
	display:-webkit-box;
	overflow:hidden;
	color:var(--primary-text);
	font-size:17px;
	font-weight:600;
	line-height:1.7;
	overflow-wrap:anywhere;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
}

.yc-abx h3 a {
	color:inherit;
	text-decoration:none;
}

.yc-abx-more {
	min-height:34px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	padding:6px 13px;
	border:1px solid var(--uicolor2);
	border-radius:999px;
	color:var(--uicolor2);
	background:transparent;
	font-size:12px;
	font-weight:700;
	line-height:1.45;
	text-decoration:none;
	touch-action:manipulation;
	transition:
		color var(--transition),
		background var(--transition),
		border-color var(--transition),
		transform var(--transition);
}

.yc-abx-more i {
	flex:0 0 auto;
	font-size:10px;
}

html[dir="ltr"] .yc-abx-more i {
	transform:scaleX(-1);
}

.yc-abx:focus-within {
	border-color:color-mix(in srgb,var(--uicolor) 42%,var(--diver));
}

.yc-abx :is(.yc-abx-img,.yc-abx-more,h3 a):focus-visible {
	outline:3px solid color-mix(in srgb,var(--uicolor) 28%,transparent);
	outline-offset:3px;
	border-radius:6px;
}

@media (hover:hover) and (pointer:fine) {
	.yc-abx:hover {
		border-color:color-mix(in srgb,var(--uicolor) 32%,var(--diver));
		box-shadow:0 13px 28px rgb(var(--primary-text-code) / 10%);
		transform:translateY(-3px);
	}

	.yc-abx-more:hover {
		color:var(--on-color);
		background:var(--uicolor-gradient);
	}
}

/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:980px) {
	.yc-abx {
		min-height:156px;
		gap:15px;
	}

	.yc-abx-img {
		width:132px;
		min-height:132px;
		flex-basis:132px;
	}

	.yc-abx h3 {
		margin-block-end:12px;
		font-size:16px;
		line-height:1.62;
	}
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
	.yc-abx {
		min-height:138px;
		gap:11px;
		padding:9px;
		border-color:color-mix(in srgb,var(--uicolor) 8%,var(--diver));
		border-radius:15px;
		box-shadow:0 7px 18px rgb(var(--primary-text-code) / 4%);
	}

	.yc-abx-img {
		width:112px;
		min-height:120px;
		flex-basis:112px;
		align-self:stretch;
		border-radius:12px;
	}

	.yc-abx-img > span {
		font-size:28px;
	}

	.yc-abx-cpy {
		justify-content:flex-start;
		padding:5px 2px 4px;
	}

	.yc-abx h3 {
		margin-block-end:9px;
		font-size:14px;
		font-weight:650;
		line-height:1.55;
		-webkit-line-clamp:3;
	}

	.yc-abx-more {
		min-height:42px;
		gap:6px;
		margin-block-start:auto;
		padding:7px 11px;
		border-radius:11px;
		background:color-mix(in srgb,var(--uicolor2) 4%,var(--surface-color));
		font-size:11px;
		line-height:1.4;
	}

	.yc-abx-more i {
		font-size:9px;
	}
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:420px) {
	.yc-abx {
		min-height:132px;
		gap:10px;
		padding:8px;
		border-radius:14px;
	}

	.yc-abx-img {
		width:100px;
		min-height:114px;
		flex-basis:100px;
		border-radius:11px;
	}

	.yc-abx-img > span {
		font-size:25px;
	}

	.yc-abx-cpy {
		padding-block:4px 3px;
	}

	.yc-abx h3 {
		margin-block-end:7px;
		font-size:13.5px;
		line-height:1.5;
	}

	.yc-abx-more {
		width:100%;
		min-height:40px;
		justify-content:space-between;
		padding-inline:10px;
		border-radius:10px;
		font-size:10.5px;
	}
}

@media only screen and (max-width:350px) {
	.yc-abx {
		min-height:124px;
		gap:8px;
		padding:7px;
		border-radius:13px;
	}

	.yc-abx-img {
		width:86px;
		min-height:110px;
		flex-basis:86px;
		border-radius:10px;
	}

	.yc-abx-img > span {
		font-size:23px;
	}

	.yc-abx-cpy {
		padding-inline:1px;
	}

	.yc-abx h3 {
		margin-block-end:6px;
		font-size:12.5px;
		line-height:1.48;
	}

	.yc-abx-more {
		min-height:38px;
		padding-inline:9px;
		font-size:10px;
	}
}

@media (hover:none) and (pointer:coarse) {
	.yc-abx-img:active {
		opacity:.92;
	}

	.yc-abx-more:active {
		border-color:var(--uicolor2);
		background:var(--uicolor-gradient);
		color:var(--on-color);
		transform:scale(.97);
	}
}

@media (prefers-reduced-motion:reduce) {
	.yc-abx,
	.yc-abx-more {
		transition:none;
	}
}