.tooto-cases-carousel {
	--tooto-case-duration: 300ms;
	--tooto-case-ease: cubic-bezier(.22, 1, .36, 1);
	width: 100%;
	min-width: 0;
	overflow: hidden;
	font-family: Poppins, sans-serif;
}
.tooto-cases-carousel:focus-visible { outline: 2px solid #ca1717; outline-offset: 3px; }
.tooto-cases-carousel .tooto-cases-carousel__viewport { width: 100%; min-width: 0; }
.tooto-cases-carousel .tooto-cases-carousel__slide {
	width: min(100%, var(--tooto-case-width, 480px));
	height: auto;
	aspect-ratio: 1;
	flex-shrink: 0;
	position: relative;
	background: var(--tooto-case-surface, #454545);
}
.tooto-cases-carousel .tooto-cases-carousel__viewport:not(.swiper-initialized) { overflow-x: auto; }
.tooto-cases-carousel .tooto-cases-carousel__viewport:not(.swiper-initialized) > .tooto-cases-carousel__track { gap: var(--tooto-case-gap, 17px); overflow: visible; }
.tooto-cases-carousel__card { position: absolute; inset: 0; display: block; overflow: hidden; color: #fff; text-decoration: none; -webkit-user-drag: none; }
.tooto-cases-carousel__card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 71%) 100%); pointer-events: none; }
.tooto-cases-carousel__card:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.tooto-cases-carousel .tooto-cases-carousel__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tooto-cases-carousel__caption { position: absolute; inset: auto 0 0; z-index: 2; padding: var(--tooto-case-padding, 32px); }
.tooto-cases-carousel .tooto-cases-carousel__title,
.tooto-cases-carousel .tooto-cases-carousel__excerpt { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tooto-cases-carousel__title { color: #fff; font-size: 24px; font-weight: 600; line-height: 1.4; -webkit-line-clamp: 2; }
.tooto-cases-carousel__excerpt { color: #e3e3e3; font-size: 16px; font-weight: 400; line-height: 1.4; -webkit-line-clamp: 3; }
.tooto-cases-carousel__details { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows var(--tooto-case-duration) var(--tooto-case-ease), opacity var(--tooto-case-duration) var(--tooto-case-ease); }
.tooto-cases-carousel__clip { min-height: 0; overflow: hidden; }
.tooto-cases-carousel__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tooto-case-detail-space, 12px); padding-top: var(--tooto-case-detail-space, 12px); transition: gap var(--tooto-case-duration) var(--tooto-case-ease), padding-top var(--tooto-case-duration) var(--tooto-case-ease); }
.tooto-cases-carousel__link { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0 5px; max-width: 100%; border-bottom: 1px solid currentColor; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.4; }
.tooto-cases-carousel__arrow { display: block; flex: 0 0 20px; width: 20px; height: 20px; background: currentColor; -webkit-mask: url('../svg/cases/arrow-right.svg') center / contain no-repeat; mask: url('../svg/cases/arrow-right.svg') center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .tooto-cases-carousel { --tooto-case-duration: 0ms; } }