strona-czynna/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css

.autoscrolling-images {
	display: flex;
	justify-content: center;
	margin: 2rem 0;
	--gap-between-horizontal-images: 14px;
}

.autoscrolling-images-wrapper {
	display: grid;
	gap: 24px;
}

.autoscrolling-images--mode-white .autoscrolling-images__img-wrapper {
	background-color: white;
}

.autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper,
.autoscrolling-images--mode-white .autoscrolling-images__img-wrapper {
	img {
		background: white; /* to get rid of weird artifacts on FF */
	}
}

.autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper {
	background-color: white;
	padding: 16px;
	height: unset;
	width: 160px;
	min-width: 0px;
	aspect-ratio: 1/1;
}

.autoscrolling-images__title-wrapper {
	max-width: 940px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.autoscrolling-images__title {
	font-family: var(--font-headings);
	font-size: 32px;
	color: var(--color-brand-text-accent);
	margin: 0;
}

.autoscrolling-images__arrow-carousel-container {
	position: absolute;
	top: -51px;
	right: -90px;
	width: 92px;
	overflow-x: hidden;
}

.autoscrolling-images__arrow-carousel {
	transition: none !important;
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
}

.autoscrolling-images__arrow-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	scroll-snap-align: start;
	flex: 1 0 100%;
}

.autoscrolling-images__arrow img {
	max-width: 30px;
}

.autoscrolling-images__arrow:hover {
	cursor: pointer;
}

.autoscrolling-images__img-arrow-left {
	transform: rotate(180deg);
}

.autoscrolling-images__carousel-container {
	position: relative;
	max-width: min(940px, calc(100dvw - 48px));

	picture,
	img {
		max-height: 150px;
		max-width: 288px;
	}
}

.autoscrolling-images__imgs-carousel {
	overflow-x: clip;
}

.autoscrolling-images__carousel {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	transition: transform 200ms;
}

.autoscrolling-images__carousel-page {
	align-items: center;
	scroll-snap-align: start;
	box-sizing: border-box;

	flex: 1 0 100%;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: var(--gap-between-horizontal-images);

	max-width: 940px;
}

.autoscrolling-images__carousel-page--looping-head,
.autoscrolling-images__carousel-page--looping-tail {
	display: none;
}

.autoscrolling-images__carousel-page--looping-tail {
	position: absolute;
	left: calc(100% + var(--gap-between-horizontal-images));
}

.autoscrolling-images__carousel-page--looping-head {
	position: absolute;
	right: 100%;
}

.autoscrolling-images__img-wrapper {
	width: 288px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.autoscrolling-images__radio {
	display: none;
}

.autoscrolling-images__dots-container {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.autoscrolling-images__dots {
	cursor: pointer;
	height: 12px;
	width: 12px;
	background-color: var(--color-brand-accent-09);
	border-radius: 50%;
	display: inline-block;
	margin: 4px;
}

.autoscrolling-images__dots:hover {
	background-color: var(--color-brand-accent-04);
}

@keyframes autoscrolling-images-infiniteScroll {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(calc(-100% - var(--gap-between-horizontal-images)));
	}
}

@container (width < 1115px) {
	.autoscrolling-images__arrow-carousel-container {
		right: 0;
	}
}

@container (width < 800px) {
	.autoscrolling-images__arrow-carousel-container {
		display: none;
	}

	.autoscrolling-images__dots-container {
		display: none;
	}

	.autoscrolling-images__carousel {
		max-width: none;
		width: max-content;
	}

	.autoscrolling-images__carousel-container {
		margin: 0;
		max-width: calc(100cqw - 20px);
	}

	.autoscrolling-images__carousel-page {
		display: flex;
		flex: none !important;
		margin: 0;
		flex-wrap: nowrap !important;
		max-width: none;
	}

	.autoscrolling-images__img-wrapper {
		min-width: 288px;
	}

	.autoscrolling-images__carousel {
		animation-name: autoscrolling-images-infiniteScroll;
		animation-duration: var(--animation-length);
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	.autoscrolling-images__carousel-page--looping-head,
	.autoscrolling-images__carousel-page--looping-tail {
		display: flex;
	}
}