@charset "utf-8";

/* IMAGE MENU */
.image-menu {
	display: grid;
	margin-block: var(--margin-block);
	}
.image-menu.force-width-wider,
.image-menu.force-width-full.image-menu-gap {
	--force-buffer: var(--margin-pad);
	}
.image-menu + .image-menu-gap {
	margin-top: var(--gap);
	}
.image-menu-gap {
	gap: var(--gap);
	}
.image-menu-group {
	display: grid;
	}
.image-menu-item {
	container-type: inline-size;
	display: grid;
	position: relative;
	}
.image-menu-item,
.image-menu-item:hover,
.image-menu-item:focus-visible {
	color: var(--color-link);
	}
.image-menu.image-menu-nogap.image-menu-default,
.image-menu.image-menu-nogap.image-menu-wider,
.image-menu-gap .image-menu-item {
	border-radius: var(--radius);
	overflow: hidden;
	}
.image-menu-image,
.image-menu-info {
	grid-area: 1 / 1;
	position: relative;
	}
	.image-menu-image > img {
		height: 100%;
		object-fit: cover;
		object-position: center;
		width: 100%;
		}
.image-menu-info {
	align-items: flex-end;
	background: linear-gradient(to bottom, rgba(var(--background-rgb),0.2) 45%, rgba(var(--background-rgb),0.9) 80%);
	display: flex;
	font-size: clamp(0.75rem, 4cqi, 1.25rem);
	z-index: 2;
	}
.image-menu-icon {
	background-color: var(--color-accent);
	border-radius: 100%;
	color: var(--color-accent-text);
	font-size: var(--icon);
	height: var(--icon-image);
	line-height: var(--icon-image);
	left: var(--buffer);
	position: absolute;
	text-align: center;
	top: var(--buffer);
	width: var(--icon-image);
	}
.image-menu-holder {
	padding: var(--buffer);
	width: 100%;
	}
.image-menu-arrow .image-menu-holder {
	padding-right: calc(var(--buffer) + var(--icon) );
	}
.image-menu-header {
	font-family: var(--font-style);
	font-size: 2em;
	font-weight: var(--font-weight-heavy);
	line-height: var(--line-height-none);
	text-wrap: balance;
	}
.image-menu-subheader {
	font-size: 1.1em;
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-none);
	margin-top: var(--space-2);
	opacity: 0.8;
	}
.image-menu-text {
	font-size: var(--font-size-xs);
	line-height: var(--line-height-snug);
	margin-top: var(--space-2);
	opacity: 0.8;
	}
.image-menu-link-arrow {
	bottom: var(--buffer);
	color: var(--color-accent);
	font-size: 1rem;
	position: absolute;
	right: var(--buffer);
	transition: color var(--animation-duration) var(--animation-easing);
	}
.image-menu-link-button {
	margin-top: var(--space-10);
	}
.image-menu-link-button > span {
	cursor: pointer;
	min-width: 0;
	}
@media (hover: hover) and (pointer: coarse), (hover: hover) and (pointer: fine) {
	.image-menu-item:hover .image-menu-link-arrow {
		color: var(--color-link);
		}
	.image-menu-item:hover .image-menu-link-button > span {
		background-color: var(--color-button-hover);
		color: var(--color-button-hover-text);
		}
}
@media (min-width: 30em) {
	.image-menu-group-vertical,
	.image-menu-group-squares,
	.image-menu-group-wide {
		grid-template-columns: 1fr 1fr;
		}
	.image-menu-group-horizontal,
	.image-menu-group-wide,
	.image-menu-group-squares {
		grid-template-rows: 1fr 1fr;
		}
	.image-menu-group-wide > .image-menu-item-horizontal {
		grid-column: span 2;
		}
	.image-menu-group,
	.image-menu-group > .image-menu-item-squares {
		aspect-ratio: 1 / 1;
		}
	.image-menu-image > img {
		position: absolute;
		}
}
@media (min-width: 60em) {
	.image-menu {
		grid-template-columns: 1fr 1fr;
		}
}
@media (min-width: 80em) {
	.image-menu-group-one .image-menu-info {
		font-size: 1.5rem;
		}
}