.b-carousel {
	--b-image-count: 6;
	--b-bar-height: 80px;
	--b-image-pad-x: 25px;
	--b-image-pad-y: 5px;
}
@media only screen and (max-width: 1325px) {
	.b-carousel {
		--b-image-count: 5;
	}
}
@media only screen and (max-width: 1024px) {
	.b-carousel {
		--b-bar-height: 60px;
	}
}
@media only screen and (max-width: 700px) {
	.b-carousel {
		--b-bar-height: 50px;
		--b-image-count: 3;
		--b-image-pad-x: 10px;
	}
}

.b-carousel {
	position: relative;
	width: 100%;
	height: var(--b-bar-height);
	
	overflow-x: hidden;
}

.b-carousel img {
	position: absolute;

	width: calc(100% / var(--b-image-count) - 2 * var(--b-image-pad-x));
	height: calc(100% - 2 * var(--b-image-pad-y));

	object-fit: contain;

	top: var(--b-image-pad-y);
	left: calc((100% / var(--b-image-count)) * var(--b-pos) + var(--b-image-pad-x));

	transition: left 0.5s;
}