.x1d4{margin-bottom:0;}
#zi{float: left; margin:20px;}
#zd{overflow: hidden; margin:0; clear: both;}
h1{margin-bottom:0; color:#af9e9e;}
h2{margin-top:40px; font-size:25px;}

.za4{display: inline-block;margin: 10px;padding: 6px 10px;background: linear-gradient(#920000, #c50000);color: #fff;border-radius: 5px;border: 2px solid #b90404;}

.za0 {display: inline-block;margin: 0 5px;}
.zi0 {width: 25px;}
.zd0{display:flex; justify-content:center; align-items:center;}
.zs0{color: #a0a0a0;text-align: center;font-size: 12px;font-weight: 700;margin: 5px;}
#zn1{padding:0 15px;}

.za0{margin:20px 10px; }

.x1a-title{text-decoration:none;}

/* Desktop: title, image, channel (same order as before) */
@media screen and (min-width: 661px) {
	.x1d4 .x1a {
		display: inline-flex;
		flex-direction: column;
		align-items: stretch;
	}
	.x1d4 .x1a-side {
		display: contents;
	}
	.x1d4 .x1a-media {
		order: 2;
		display: block;
	}
	.x1d4 .x1a-title {
		order: 1;
		display: block;
	}
	.x1d4 .x1a-title .x1s {
		display: block;
		text-align: center;
	}
	.x1d4 .zd0 {
		order: 3;
		justify-content: center;
	}
}

@media screen and (max-width: 660px) {
	.x1d4 {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 0 8px;
	}
	.x1d4 .x1a {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		column-gap: 16px;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 12px 14px;
		box-sizing: border-box;
	}
	.x1d4 .x1a-media {
		flex: 0 0 120px;
		display: flex;
		align-items: center;
		align-self: stretch;
	}
	.x1d4 .x1i3 {
		width: 120px;
		height: auto;
		margin: 0;
		display: block;
	}
	.x1d4 .x1a-side {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		align-self: stretch;
		gap: 8px;
		flex: 1;
		min-width: 0;
		min-height: 100%;
	}
	.x1d4 .x1a-title {
		display: block;
		text-decoration: none;
		flex-shrink: 0;
	}
	.x1d4 .x1s {
		display: block;
		text-align: left;
		margin: 0;
		padding: 0;
		height: auto;
		min-height: 0;
		line-height: 1.3;
	}
	.x1d4 .zd0 {
		justify-content: flex-start;
		align-items: flex-start;
		margin: 0;
		gap: 6px;
	}
	.x1d4 .x1a:hover {
		transform: none;
	}
	.za0 {
		margin: 0;
	}
}