.image-gallery-navigation {
	margin-top: 1rem;
}

.image-gallery-navigation li {
	border: 2px solid transparent;
}

.image-gallery-navigation li.is-active {
	border: 2px solid var(--color-primary);
}

.image-gallery-thumbnails {
  display: grid;
	grid-auto-flow: column;
	gap: 1rem;
}

.image-gallery-controls {
	margin-top: 2rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

button.image-gallery-button {
	padding: 0.25rem;
	width: 2.5rem;
	border-radius: 50%;
	aspect-ratio: 1;
	border: 2px solid var(--color-primary);
	background-color: var(--white);
	background-repeat: no-repeat;
	background-size: 1rem;
	background-position: center center;
}

button.image-gallery-button:hover,
button.image-gallery-button:focus {
	background-color: var(--color-secondary);
}

.image-gallery-button--prev {
	background-image: url(/assets/icons/caret-left--primary.svg);
}

.image-gallery-button--next {
	background-image: url(/assets/icons/caret-right--primary.svg);
}

.image-gallery-count {
	font: var(--l-bold);
	color: var(--black);
}