/********************************************************************
Single Image item
*********************************************************************/
 
.vb-thumbnail {
	--tm-sp: 0px;
	--tm-wt: var(--vb-tm-wt,fit-content);
	--tm-mx-wt: var(--vb-tm-mx-wt,100%);
	--tm-ht: var(--vb-tm-ht,auto);
	--tm-ratio: var(--vb-tm-ratio,1);
	--tm-op: var(--vb-tm-op,1);
	--tm-bg: var(--vb-tm-bg,transparent);
	--tm-br-wt: var(--vb-tm-br-wt,0px);
	--tm-br-cr: var(--vb-tm-br-cr,var(--vb-global-br-cr));
	--tm-br-st: var(--vb-tm-br-st,solid);
	--tm-sd: var(--vb-tm-sd,initial);
	--tm-rd: var(--vb-tm-rd,var(--vb-global-rd));
	--tm-hv-op: var(--vb-tm-hv-op,var(--tm-op));
	--tm-hv-bg: var(--vb-tm-hv-bg,var(--tm-bg));
	--tm-hv-br-wt: var(--vb-tm-hv-br-wt,var(--tm-br-wt));
	--tm-hv-br-cr: var(--vb-tm-hv-br-cr,var(--tm-br-cr));
	--tm-hv-br-st: var(--vb-tm-hv-br-st,var(--tm-br-st));
	--tm-hv-sd: var(--vb-tm-hv-sd,var(--tm-sd));
	--tm-ti: var(--vb-tm-ti,var(--vb-global-ti-duration));
	--tm-ob-fit: var(--vb-tm-ob-fit,cover);
	--tm-ob-pos: var(--vb-tm-ob-pos,center center);
}

body .vb-thumbnail {
	cursor: pointer;
	--tm-bg: var(--vb-tm-bg,rabg(0,0,0,0.0))!important;
	--tm-ratio: var(--vb-tm-ratio,1)!important;
	--tm-op: var(--vb-tm-op,0.5)!important;
	width: 100% !important;
	padding: 0px  0px calc(100% * var(--tm-ratio)) 0px !important;
	margin: 0px !important;
	height: 0px !important;
	display: flex !important;
	text-align: inherit!important;
	justify-content: inherit!important;
	flex-wrap: wrap!important;
	flex-direction: column!important;
	margin: 0px !important;
}

.vb-thumbnail-list > .vb-thumbnail-active  .vb-thumbnail,
 .vb-thumbnail-list > .vb-thumbnail   .vb-thumbnail {
	--tm-op: 1 !important;
	--tm-hv-op: 1 !important;
}

body .vb-thumbnail   .vb-thumbnail-stretch {
	position: absolute !important;
	width: calc(100% - var(--main-gap))!important;
	height: calc(100% - var(--main-gap)) !important;
	max-width: 100% !important;
	overflow: hidden;
	inset-inline-start: 0px!important;
	top: 0px !important;
	margin: calc(var(--main-gap)  /2 )!important;
	vertical-align: var(--post-ver,top) !important;
	display: inline-block !important;
	border-width: var(--tm-br-wt)!important;
	border-color: var(--tm-br-cr)!important;
	border-style: var(--tm-br-st)!important;
	box-shadow: var(--tm-sd-ofw,var(--tm-sd))!important;
	border-radius: var(--tm-rd)!important;
	transition-duration: var(--tm-ti)!important;
	transition-property: var(--vb-global-ti-property)!important;
}

body .vb-thumbnail .vb-thumbnail-stretch::after {
	content: "";
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	inset-inline-start: 0px;
	box-sizing: border-box;
	top: 0px;
	transition-duration: var(--tm-ti) !important;
	transition-property: var(--vb-global-ti-property) !important;
	background: var(--tm-bg) !important;
}

body .vb-thumbnail:hover   .vb-thumbnail-stretch::after,
body .vb-thumbnail-active   .vb-thumbnail-stretch::after {
	background: var(--tm-hv-bg) !important;
	transition-duration: var(--tm-ti)!important;
	transition-property: var(--vb-global-ti-property)!important;
}

body .vb-thumbnail:hover  .vb-thumbnail-stretch,
body .vb-thumbnail-active .vb-thumbnail-stretch {
	border-width: var(--tm-hv-br-wt)!important;
	border-color: var(--tm-hv-br-cr)!important;
	border-style: var(--tm-hv-br-st)!important;
	box-shadow: var(--tm-hv-sd-ofw,var(--tm-hv-sd))!important;
	transition-duration: var(--tm-ti)!important;
	transition-property: var(--vb-global-ti-property)!important;
}

.vb-thumbnail img {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	min-width: 0px !important;
	display: inline-block !important;
	vertical-align: top !important;
	min-height: 0px !important;
	object-fit: var(--tm-ob-fit) !important;
	object-position: var(--tm-ob-pos) !important;
	opacity: var(--tm-op) !important;
	position: relative !important;
}

.vb-thumbnail:hover img,
.vb-thumbnail-active img {
	opacity: var(--tm-hv-op)!important;
}