.hoverbox
{
	position: relative;
	display: flex;
	justify-content: center;
	align-content: center;
	overflow: hidden;
}
:not(.render-container) > .hoverbox
{
	/* dirty fix to avoid white gaps due to rounding issues */
	/*
	margin-bottom: -1px;
	margin-right: -1px;
	*/
}
.hoverbox.link,
.hoverbox.link:hover
{
	text-decoration: none;
}

.hoverbox:not(:last-child)
{
	margin-bottom: var(--columns-gutter-y, 1rem);
}

.hoverbox .image
{
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	min-height: 100%;
}
.hoverbox .image :is(picture, img)
{
	display: block;
	max-width: none;
	height: 100%;
}
.hoverbox .image img
{
	object-fit: cover;
	transition: transform 4s ease .1s;
	transform: scale3d(1, 1, 1);
	image-rendering: smooth;
	/* fix to avoid white gaps due to rounding issues */
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	margin-top: -1px;
	margin-left: -1px;
}
.hoverbox:hover .image img,
.hoverbox:active .image img
{
	transition: transform 10s ease-out;
	transform: scale(1.2);
	-webkit-user-select: none;
	-webkit-touch-callout: none
}

.hoverbox .wrapper
{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 1rem;
	transition: z-index .5s ease;
	z-index: -1; /* fix to avoid click events on touch devices */
	text-decoration: none;
}
.hoverbox:hover .wrapper,
.hoverbox:active .wrapper
{
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	z-index: 1; /* enable click events on touch devices */
	text-decoration: none;
}

.hoverbox .box
{
	display: block;
	text-align: center;
	padding: 1rem;
	opacity: 0;
	transform: scale(0.97);
	transition: opacity .5s ease, transform .5s ease;
	box-sizing: border-box;
	background: rgba(0, 0, 0, .75);
	color: #FFFFFF;
	will-change: transform, opacity;
}
.hoverbox:hover .box,
.hoverbox:active .box
{
	opacity: 1;
	transform: scale(1);
}
.hoverbox .box > * { display: block; }
.hoverbox .title { font-size: 1.5rem; }
.hoverbox .title:not(:last-child) { margin-bottom: .5rem; }
.hoverbox .text { font-size: 1rem; }


/*  valign  */
.hoverbox-valign-full { height: 100%; }
.pageroot .render-container:has(> .hoverbox-valign-full):first-child:last-child { height: 100%; }


/*  ratio  */
.hoverbox-ratio-square { aspect-ratio: 1; }
.hoverbox-ratio-4to3 { aspect-ratio: calc(4/3); }
.hoverbox-ratio-16to9 { aspect-ratio: calc(16/9); }
:is(.hoverbox-ratio-square, .hoverbox-ratio-4to3, .hoverbox-ratio-16to9) .image picture { width: 100%; height: 100%; object-fit: cover; object-position: center center; }