.sb-video-gallery {
	--sb-video-gallery-gap: 1rem;
	--sb-video-gallery-ratio: 8 / 9;
}

/* Aspect ratios */
.sb-video-gallery--ratio-16_9 {
	--sb-video-gallery-ratio: 16 / 9;
}

.sb-video-gallery--ratio-9_16 {
	--sb-video-gallery-ratio: 9 / 16;
}

.sb-video-gallery--ratio-1_1 {
	--sb-video-gallery-ratio: 1 / 1;
}

.sb-video-gallery--ratio-4_5 {
	--sb-video-gallery-ratio: 4 / 5;
}

.sb-video-gallery--ratio-8_9 {
	--sb-video-gallery-ratio: 8 / 9;
}

/* Header */
.sb-video-gallery__header {
	margin-bottom: 1.5rem;
}

/* Bootstrap row/columns */
.sb-video-gallery__row {
	--bs-gutter-x: var(--sb-video-gallery-gap);
	--bs-gutter-y: var(--sb-video-gallery-gap);

	row-gap: var(--sb-video-gallery-gap);
}

.sb-video-gallery__col {
	min-width: 0;
}

.sb-video-gallery__col[hidden] {
	display: none !important;
}

.sb-video-gallery__col.is-revealing {
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity 0.75s var(--easing),
		transform 0.75s var(--easing);
}

.sb-video-gallery__col.is-revealing.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.sb-video-gallery__show-all {
	transition:
		opacity 0.3s var(--easing),
		transform 0.3s var(--easing);
}

.sb-video-gallery__show-all.is-hiding {
	opacity: 0;
	transform: translateY(-0.25rem);
}


/* Media tile */
.sb-video-gallery__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--sb-video-gallery-ratio);
	overflow: hidden;
	background-color: #000;
}

.sb-video-gallery__poster {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	overflow: hidden;
}

/* Bottom gradient for play icon contrast */
.sb-video-gallery__poster::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 45%;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .45),
		rgba(0, 0, 0, 0)
	);
}

.sb-video-gallery__picture,
.sb-video-gallery__image,
.sb-video-gallery__video {
	display: block;
	width: 100%;
	height: 100%;
}

.sb-video-gallery__image,
.sb-video-gallery__video {
	object-fit: cover;
}

/* Fit modes */
.sb-video-gallery--fit-cover .sb-video-gallery__image,
.sb-video-gallery--fit-cover .sb-video-gallery__video {
	object-fit: cover;
}

.sb-video-gallery--fit-contain .sb-video-gallery__image,
.sb-video-gallery--fit-contain .sb-video-gallery__video {
	object-fit: contain;
}

/* Thumbnail hover */
.sb-video-gallery__image {
	transition: transform 0.75s var(--easing);
}

.sb-video-gallery__poster:hover .sb-video-gallery__image,
.sb-video-gallery__poster:focus-visible .sb-video-gallery__image {
	transform: scale(1.05);
}

/* Play icon */
.sb-video-gallery__play {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 2;
	width: 1.35rem;
	height: 1.35rem;
	pointer-events: none;
	transition: transform 0.75s var(--easing);
}

.sb-video-gallery__play svg {
	display: block;
	width: 100%;
	height: 100%;
}

.sb-video-gallery__play path {
	fill: #fff;
}

.sb-video-gallery__poster:hover .sb-video-gallery__play,
.sb-video-gallery__poster:focus-visible .sb-video-gallery__play {
	transform: scale(1.08);
}

.sb-video-gallery__title {
	text-align: center;
	margin-top: 0.25rem;
	line-height: 1.2;
	text-wrap: balance;
}

/* Focus */
.sb-video-gallery__poster:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Show all */
.sb-video-gallery__show-all {
	margin-top: 1.5rem;
	text-align: right;
	
}
.sb-video-gallery__show-all button {
	text-transform: uppercase;
}
.sb-video-gallery__show-all[hidden] {
	display: none !important;
}