.image-grid {
	--image-grid-max-width: none;
	--image-grid-item-max-width: 100%;
	--image-grid-item-max-width-medium: var(--image-grid-item-max-width, 100%);
	--image-grid-item-max-width-responsive: var(--image-grid-item-max-width-medium, var(--image-grid-item-max-width, 100%));
	--image-grid-justify: space-between;
	--image-grid-justify-medium: var(--image-grid-justify, space-between);
	--image-grid-justify-responsive: var(--image-grid-justify-medium, var(--image-grid-justify, space-between));
	--image-grid-gap: 0.3125rem;

	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: var(--image-grid-justify);
	gap: var(--image-grid-gap);
	margin: 0 auto;
	padding: 0;
	max-width: var(--image-grid-max-width);
	list-style: none;
}

.image-grid__item {
	list-style: none;
	flex: 0 1 var(--image-grid-item-max-width, 100%);
	max-width: var(--image-grid-item-max-width, 100%);
	text-align: center;
}

.image-grid__media {
	display: block;
	overflow: hidden;
	width: 100%;
}

.image-grid__image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}

.image-grid--ratio-1-1 .image-grid__media {
	aspect-ratio: 1 / 1;
}

.image-grid--ratio-4-3 .image-grid__media {
	aspect-ratio: 4 / 3;
}

.image-grid--ratio-3-2 .image-grid__media {
	aspect-ratio: 3 / 2;
}

.image-grid--ratio-16-9 .image-grid__media {
	aspect-ratio: 16 / 9;
}

.image-grid--ratio-2-1 .image-grid__media {
	aspect-ratio: 2 / 1;
}

.image-grid[class*="image-grid--ratio-"] .image-grid__image {
	width: 100%;
	height: 100%;
}

.image-grid--fit-cover .image-grid__image {
	object-fit: cover;
}

.image-grid--fit-contain .image-grid__image {
	object-fit: contain;
}

.image-grid--fit-fill .image-grid__image {
	object-fit: fill;
}

.image-grid--fit-none .image-grid__image {
	object-fit: none;
}

.image-grid--fit-scale-down .image-grid__image {
	object-fit: scale-down;
}

@media screen and (max-width: 960px) {
	.image-grid {
		justify-content: var(--image-grid-justify-medium, var(--image-grid-justify, space-between));
	}

	.image-grid__item {
		flex-basis: var(--image-grid-item-max-width-medium, var(--image-grid-item-max-width, 100%));
		max-width: var(--image-grid-item-max-width-medium, var(--image-grid-item-max-width, 100%));
	}
}

@media screen and (max-width: 800px) {
	.image-grid {
		justify-content: var(--image-grid-justify-responsive, var(--image-grid-justify-medium, var(--image-grid-justify, space-between)));
	}

	.image-grid__item {
		flex-basis: var(--image-grid-item-max-width-responsive, var(--image-grid-item-max-width-medium, var(--image-grid-item-max-width, 100%)));
		max-width: var(--image-grid-item-max-width-responsive, var(--image-grid-item-max-width-medium, var(--image-grid-item-max-width, 100%)));
	}
}