.cards-carousel .wp-block-columns > :first-child { margin: 0; }

.cards-container {
	width: 100%;
	margin: 0 auto;
	padding: 0 0 10px;
	overflow: hidden;
}

.cards-carousel::-webkit-scrollbar { display: none; }

.cards-carousel {
	--acc-col: 5;
	--acc-gap: 52px;
	container: cards / inline-size;
	gap: var(--acc-gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
}

.cards-carousel > * {
	--col-width: calc(var(--acc-col)*(100cqw - 52px)/12);
	flex: 0 0 auto;
	overflow: hidden;
	position: relative;
	scroll-snap-align: start;
}

@media (width > 1100px) {
	.cards-carousel { display: flex; }

	.cards-carousel > * {
	border: 2px solid transparent;
	width: var(--col-width);
	}
}


.cards-pager {
	--total-pages: "3";
	display: flex;
	justify-content: space-between;
	margin: 54px 0 10px;
	position: relative;
}

.cards-pager > * {
	display: block;
	flex-grow: 1;
}

.cards-pager input {
	appearance: none;
	background: var(--light-gray-7);
	cursor: pointer;
	display: block;
	height: 2px;
	width: 100%;
}

.cards-pager input:is(:checked, :hover) { background: var(--blue); }

.cards-container :is(input, button):focus {
	outline: 2px dotted var(--magenta) !important;
	outline-offset: 4px;
}

.cards-pager:after,
.cards-pager span:after {
	display: none;
	font: 400 17px / 36px var(--font);
	height: 36px;
	position: absolute;
	width: 25px;
}

.cards-pager:after {
	content: attr(data-index);
	display: flex;
	inset: 20px auto auto calc( 50% + 3px );
}

.cards-pager span:has(input:checked):after {
	content: attr(data-index) " / ";
	display: flex;
	inset: 20px auto auto calc(50% - 25px);
	justify-content: flex-end;
}

/* ARROWS */
.cards-nav {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 17px;
}

.cards-nav > * {
	background: var(--chevron) center center / 18px 11px no-repeat;
	filter: brightness(0) invert(0);
	height: 36px;
	transform: rotate(-90deg);
	width: 36px;
}

.cards-prev {
	margin-right: 40px;
	transform: rotate(90deg);
}

.cards-next { margin-left: 40px; }

.cards-container:has(.cards-pager > :last-child :checked) .cards-next,
.cards-container:has(.cards-pager > :first-child :checked) .cards-prev {
	opacity: 0.4;
	outline: none !important;
	pointer-events: none;
}

@media (width > 900px) {
	.cards-container { padding: 0 26px 10px; }
}

@media (width < 1100px) {
	.cards-carousel > :not(:last-child) { margin-bottom: 27px !important; }

	.cards-carousel > * > :last-child { padding: 27px 0 !important; }

	.cards-pager,
	.cards-nav { display: none; }

}

@media (width < 600px) {
	.cards-carousel > * { gap: 0 !important; }
}