.tr-image-lightbox {
	margin-bottom: 4.5rem;
}

.tr-image-lightbox__media {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	display: block;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
}

.tr-image-lightbox__media,
.tr-image-lightbox__media:hover,
.tr-image-lightbox__media:focus,
.tr-image-lightbox__media:active {
	background: transparent;
	box-shadow: none;
	text-decoration: none;
}

.tr-image-lightbox__media::before,
.tr-image-lightbox__media::after {
	content: none;
	display: none;
}

.tr-image-lightbox__media picture {
	display: block;
	width: 100%;
}

.tr-image-lightbox__image {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	transition: filter 0.25s ease-in-out;
	width: 100%;
}

.tr-image-lightbox__media:hover .tr-image-lightbox__image,
.tr-image-lightbox__media:focus-visible .tr-image-lightbox__image {
	filter: brightness(0.85);
}

.tr-image-lightbox__open {
	align-items: center;
	background: #d8d8d8;
	border-radius: 999rem;
	bottom: 1.5rem;
	color: #393838;
	display: inline-flex;
	height: 2.5rem;
	justify-content: center;
	position: absolute;
	right: 1.5rem;
	transition:
		background-color 0.3s ease-in-out,
		color 0.3s ease-in-out;
	width: 2.5rem;
	z-index: 2;
}

.tr-image-lightbox__media:hover .tr-image-lightbox__open,
.tr-image-lightbox__media:focus-visible .tr-image-lightbox__open {
	background: #393838;
	color: #ffffff;
}

.tr-image-lightbox__media:focus-visible {
	outline: 0.125rem solid var(--tr-color-brand-kwmk-blue, #00519e);
	outline-offset: 0.25rem;
}

.tr-image-lightbox__icon-svg {
	display: block;
	height: 1.5rem;
	width: 1.5rem;
}

.tr-image-lightbox__caption {
	color: #393838;
	font-size: 0.875rem;
	line-height: 1.45;
	margin-top: 0.75rem;
}

.tr-image-lightbox-modal[hidden] {
	display: none;
}

.tr-image-lightbox-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 2rem;
	position: fixed;
	z-index: 99999;
}

.tr-image-lightbox-modal__backdrop {
	background: rgba(0, 0, 0, 0.86);
	inset: 0;
	position: absolute;
}

.tr-image-lightbox-modal__dialog {
	max-height: calc(100vh - 4rem);
	max-width: calc(100vw - 4rem);
	position: relative;
	z-index: 1;
}

.tr-image-lightbox-modal__image {
	display: block;
	max-height: calc(100vh - 4rem);
	max-width: calc(100vw - 4rem);
	object-fit: contain;
	width: auto;
}

.tr-image-lightbox-modal__close {
	align-items: center;
	background: #ffffff;
	border: 0;
	border-radius: 999rem;
	color: #000000;
	cursor: pointer;
	display: inline-flex;
	font-size: 2rem;
	height: 2.75rem;
	justify-content: center;
	line-height: 1;
	padding: 0 0 0.125rem;
	position: absolute;
	right: -1.25rem;
	top: -1.25rem;
	width: 2.75rem;
}

.tr-lightbox-is-open {
	overflow: hidden;
}

@media (max-width: 47.9375rem) {
	.tr-image-lightbox {
		margin-bottom: 3rem;
	}

	.tr-image-lightbox__open {
		bottom: 1rem;
		right: 1rem;
	}

	.tr-image-lightbox-modal {
		padding: 1rem;
	}

	.tr-image-lightbox-modal__dialog,
	.tr-image-lightbox-modal__image {
		max-height: calc(100vh - 2rem);
		max-width: calc(100vw - 2rem);
	}

	.tr-image-lightbox-modal__close {
		right: 0.75rem;
		top: 0.75rem;
	}
}