:root{
	--ax-gap: var(--global-xs-spacing, 1rem);
	--ax-radius: 8px;
	--ax-sz-txt: var(--global-font-size-small, .85rem);
	--ax-sz-title: var(--global-font-size-medium, 1.3rem);
	--ax-color-title: var(--global-palette3, var(--contrast, var( --e-global-color-primary, #222)));
	--ax-color-txt: var(--global-palette5, var(--e-global-color-text, var(--contrast-3, #888)));
	--ax-color-base: var(--global-palette9, var(--base, #fff));
	--ax-color-accent: var(--global-palette1, var(--accent, var(--e-global-color-accent)));
}

.stretched-link a::after, 
a.stretched-link::after{
	content: "";
	position: absolute;
	inset: 0;
}

.ax-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(25ch,100%), 1fr));
	gap: var(--ax-gap);
}
.ax-item{
	position: relative;
	.ax-img{
		width: 100%;
	}
	.ax-content{
		padding: var(--ax-gap);
		display: flex;
		flex-direction: column;
		gap: calc(var(--ax-gap) /2);
		overflow: hidden;
		font-size: var(--ax-sz-txt);
	}
	.ax-title{
		margin: 0;
		font-size: var(--ax-sz-title);
		line-height: 1.2;
		a::after{
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
		}
	}
	.ax-metas {
		font-size: var(--ax-sz-txt);
		.ax-meta-tax{
			display: flex;
/* 			flex-wrap: wrap; */
			gap: .2em;
		}
		a{
			text-decoration: none;
			display: inline-block;
			padding: .1em .4em;
			background: var(--ax-color-title);
			color: var(--ax-color-base);
			border-radius: var(--ax-radius);
			white-space: nowrap;
			z-index: 2;
		}
	}
	ul:not(.ax-metas){
		padding-left: 0;
		list-style: none;
		li{
			line-height: 1;
			margin-bottom: .4rem;
			overflow: hidden;
			text-overflow: '.';
			a{
				position: relative;
				z-index: 3;
				color: var(--ax-color-txt);
				white-space: nowrap;
				&:hover{
					color: var(--ax-color-accent);
				}
			}
		}
	}
}

.ax-compact {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(32ch,100%), 1fr));
	gap: calc(var(--ax-gap) / 2);
	.ax-item{
		display: grid;
		grid-template-columns: 80px auto;
		grid-template-areas: "img content";
		gap: calc(var(--ax-gap) / 2);
		.ax-img{
			grid-area: img;
			object-fit: cover;
		}
		.ax-content{
			grid-area: content;
			padding: 0;
			justify-content: center;
			.ax-title{
				font-size: 1rem;
			}
			.ax-metas{
				display: flex;
				gap: .5ch;
			}
		}
		&:has(> .ax-content:first-child){
			grid-template-columns: auto;
			grid-template-areas: "content";
			.ax-content{
				padding: 0;
			}
		}
	}
}

.ax-loop.ax-list{
	display: flex;
	flex-direction: column;
	gap: calc(var(--ax-gap) * 2);
	.ax-item{
		display: grid;
		grid-template-columns: 80px auto;
		grid-template-areas: "img content";
		gap: var(--ax-gap);
		.ax-img{
			grid-area: img;
		}
		.ax-content{
			grid-area: content;
			padding: 0;
		}
		&:has(:not(.ax-img))
		{
			grid-template-areas: "content content";
		}
	}
}

.ax-loop .group-wrapper{
	display: contents;
	.group-title{
		grid-column: 1/-1;
	}
}