.illustrations {
	display: block;
	margin: 0;
	padding: var(--space-m);
	max-width: var(--max-width);
}

.grid-sizer,
.grid-item {
	width: 100%;
}

.gutter-sizer {
	width: var(--space-m);
}

.grid-item {
	display: block;
	position: relative;
	margin-bottom: var(--space-m);
}

.illu_link {
	display: block;
	width: 100%;
	height: 100%;
	user-select: none;
}

.illu_image {
	width: 100%;
}

.illu_image > picture {
	border-radius: var(--border-radius);
	overflow: hidden;
}

.illu_image figcaption {
	padding-top: var(--space-xs);
}

/* glightbox overrides */
.goverlay {
	background: #fff;
}

@media (min-width: 640px) {
	.grid-sizer,
	.grid-item {
		width: calc(50% - var(--space-gap));
	}
}

@media (min-width: 992px) {
	.illustrations {
		margin: 0 auto;
		padding: 0 var(--space-m);
	}

	.grid-sizer,
	.grid-item {
		width: calc((100% / 3) - 15px);
	}
}

@media (min-width: 992px) and (hover: hover) {
	.illu_image {
		position: relative;
		overflow: hidden;
	}

	.illu_image figcaption {
		position: absolute;
		bottom: 0;
		transform: translateY(calc(100% + (var(--space-xs) * 2)));
		opacity: 0;
		transition: all var(--anim-speed) var(--anim-ease);
		margin: var(--space-xs);
		border-radius: var(--border-radius);
		background: var(--color-white);
		padding: var(--space-xs);
		width: calc(100% - (var(--space-xs) * 2));
	}

	.illu_link:hover figcaption {
		transform: translateY(0%);
		opacity: 1;
	}
}