@charset "utf-8";

/*	Impostazione variabili */

	* {

	/*	COLOR PALETTE IN ORDINE DI IMPORTANZA */
	/*
		--Palette1: #AE1857;
		--Palette2: #fdc517;
		--Palette3: #8b1446; 
		--Palette4: #cfa215; 
	*/

	/*	PAGINA */
		--Page_Background_Color: #eeeeee;
		--Page_Title_Color: #444444;
		--Page_Text_Color: #444444;
		--Link_Text_Color: var(--Palette1);

	/*	LOGHI */
		--Logo_Light: url(/images/logo/website_white.png);
		--Logo_Dark: url(/images/logo/website_black.png);

	/*	FONTS */
		--Font_Normal: "Roboto","Arial","Helvetica";
		--Font_Condensed: "Roboto Condensed","Arial Narrow","Helvetica Condensed";

	/*	HEADER */
		--Header_Background_Color: #ffffff;
		--Header_Background_Border_Color: #cccccc;
		--Header_Text_Color: #333333;

		--Header_Font: var(--Font_Normal);
		--Header_Search_Box_Font: var(--Font_Normal);
		--Header_Menu_Font: var(--Font_Normal);

		--Header_Menu_Buttons_Text: #333333;
		--Header_Menu_Buttons_Background: transparent;
		--Header_Menu_Buttons_Text_Hover: #ffffff;
		--Header_Menu_Buttons_Background_Hover: var(--Palette1);

		--Header_SubMenu_Background: #ffffff;
		--Header_SubMenu_Buttons_Text: #444444;
		--Header_SubMenu_Buttons_Background: transparent;
		--Header_SubMenu_Buttons_Text_Hover: #ffffff;
		--Header_SubMenu_Buttons_Background_Hover: var(--Palette1);

	/*	FOOTER */
		--Footer_Background: #dddddd;
		--Footer_Text_Color: #444444;
		--Footer_Text_Font_Size: 0.9rem;
		--Footer_Titles_Font_Size: 1.5rem;
		--Footer_Link_Color: #4281bf;
		--Footer_Link_Underline: underline;
		--Footer_Logo_Height: 2rem;

	/*	SCROLLBARS */
		--Scrollbars_Width: 0.6rem;
		--Scrollbars_Color:#999999;
		--Scrollbars_Background:#dddddd;

	/*	ROTOR 
		--Rotor_OffsetTop: 6rem;
		--Rotor_MaxWidth:unset;
		--Rotor_MaxHeight:unset; */

	/*	VARIANTE PER ROTOR PIU PICCOLO E CENTRATO */
		--Rotor_OffsetTop: 9rem;
		--Rotor_MaxWidth:70rem;
		--Rotor_MaxHeight:30rem; 

	/*	BOX EVENTI */
		--Box_Evento_Background_Color: #ffffff;
		--Box_Evento_Border_Color: #cccccc;
		--Box_Evento_Titles_Color: var(--Palette1);
		--Box_Evento_Titles_Font: var(--Font_Normal);
		--Box_Evento_Title_FontSize: 1.7rem;
		--Box_Evento_Subtitle_FontSize: 1.3rem;
		--Box_Evento_Authors_Color: var(--Page_Text_Color);
		--Box_Evento_Authors_Font: var(--Font_Normal);
		--Box_Evento_Button_Font: var(--Font_Normal);
		--Box_Evento_Button_Text_Color: var(--Palette1);
		--Box_Evento_Button_Background: #ffffff;
		--Box_Evento_Date_Color: var(--Page_Text_Color);
		--Box_Evento_Date_Font: var(--Font_Normal);
		--Box_Evento_Date_FontSize: 0.9rem;
		--Box_Evento_Abstract_Color: #777777;
		--Box_Evento_Abstract_Font: var(--Font_Normal);
		--Box_Evento_Abstract_FontSize: 1.1rem;

	/*	BOX NOTIZIA VERTICALE */
		--Notizia_Background: #ffffff;
		--Notizia_Titles_Color: var(--Palette1);
		--Notizia_Titles_Font: var(--Font_Normal);
		--Notizia_Title_FontSize: 1.7rem;
		--Notizia_Subtitle_FontSize: 1.3rem;
		--Notizia_Button_Font: var(--Font_Normal);
		--Notizia_Button_Text_Color: #ffffff;
		--Notizia_Button_Background: var(--Palette1);
		--Notizia_Abstract_Color: var(--Page_Text_Color);
		--Notizia_Abstract_Font: var(--Font_Normal);
		--Notizia_Abstract_FontSize: 1rem;

	}


/*	Regole CSS comuni */
	HTML, BODY {
		margin:0;
		padding:0;
		border:0;
		width:100%;
		font-family: var(--Font_Normal);
		background-color: var(--Page_Background_Color);
	}
	
	A, A:visited, A:active { color:var(--Link_Text_Color); }

	.NotVis {
		position: absolute;
		left:-5000vw;
		top:-5000vw;
	}

/*	Spinner */

	@-webkit-keyframes Spin {
		from {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg);
		}
	}
	@keyframes Spin {
		from {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
	to {
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg);
		}
	}
	#SpinnerOverlay {
		display: none;
		position: fixed;
		left:0;
		top:0;
		width:100%;
		height: 100vh;
		z-index: 12000;
		overflow: hidden;
		overscroll-behavior: contain;
		background-color: #ffffffdd;
	}
	#SpinnerOverlay .Spinner {
		position: absolute;
		left:50%;
		top:50%;
		margin-left:calc(-3.5rem - 0.75rem);
		margin-top:calc(-3.5rem - 0.75rem);
		display: block;
		height: 7rem;
		width: 7rem;
		border-radius: 50%;
	}
	#SpinnerOverlay .Spin1 {
		border: 1.5rem #e0e0e0 solid;
		border-top: 1.5rem var(--Palette2) solid;
		-webkit-animation: Spin 1s infinite linear;
		animation: Spin 1s infinite linear;
	}
	#SpinnerOverlay .Spin2 {
		border: 1.5rem transparent solid;
		border-top: 1.5rem var(--Palette1) solid;
		-webkit-animation: Spin 1.5s infinite linear;
		animation: Spin 1.5s infinite linear;
	}



/*	Settaggio scrolbars */

	::-webkit-scrollbar {
		-webkit-box-shadow: none;
		width: var(--Scrollbars_Width);
		background-color:var(--Scrollbars_Background);
	}
	 
	::-webkit-scrollbar-track {
		-webkit-box-shadow: none;
		-webkit-border-radius: 0;
		border-radius: 0;
		background-color:trdnsparent;
	}
	 
	::-webkit-scrollbar-thumb { 
		-webkit-box-shadow: none; 
		-webkit-border-radius: 0;
		border-radius: 0;
		background: var(--Scrollbars_Color);
		border:none;
	}
	::-webkit-scrollbar-thumb:window-inactive {
		background: var(--Scrollbars_Color);
	}





/*	-------------------------------------------------------------------------- */
/*	Mobile sino a 480 portrait (la maggior parte dei mobile) 
/*	-------------------------------------------------------------------------- */
	@media screen and (max-width: 440px) {

		HTML {
			font-size: 3.6vw;
		}
		BODY {
			/* padding-top rimosso: #Header ora è "sticky" (nuovo layout 2026), non più "fixed" */
		}
		.Container {
			display: block;
			max-width: 92vw;
			margin-left: auto;
			margin-right: auto;
			margin-top: 2.5rem;
			margin-bottom: 2rem;
			color: var(--Page_Text_Color);
		}
		.Container H1.PageTitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 1.5rem;
			margin-top: -2rem;
			line-height: 1.1em;
			font-size: 3.1rem;
			font-weight: 900;
			color: var(--Page_Title_Color);
			text-align: left;
		}
		.Container H2.PageSubtitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 1.5rem;
			line-height: 1.2em;
			font-size: 1.6rem;
			font-weight: 400;
			color: #444444;
			text-align: left;
			font-style: italic;
		}

	}

/*	-------------------------------------------------------------------------- */
/*	Desktop sino a 1366 (la maggior parte dei notebook) 
/*	-------------------------------------------------------------------------- */
	@media screen and (min-width: 441px) and (max-width: 1366px) {

		HTML {
			font-size: 1.32vw;
		}
		BODY {
			/* padding-top rimosso: #Header ora è "sticky" (nuovo layout 2026), non più "fixed" */
		}
		.Container {
			display: block;
			max-width: 71.222rem;;
			margin-left: auto;
			margin-right: auto;
			margin-top: 2rem;
			margin-bottom: 5rem;
			color: var(--Page_Text_Color);
		}
		.Container H1.PageTitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 1.0rem;
			line-height: 1em;
			font-size: 3.5rem;
			font-weight: 900;
			color: var(--Page_Title_Color);
			text-align: left;
			margin-bottom: 2rem;
		}
		.Container H2.PageSubtitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 1.5rem;
			line-height: 1em;
			font-size: 1.9rem;
			font-weight: 400;
			color: #444444;
			text-align: left;
			font-style: italic;
		}
		
	}

/*	-------------------------------------------------------------------------- */
/*	Schermi sopra i 1366 (solitamente fullHD) 
/*	-------------------------------------------------------------------------- */
	@media screen and (min-width: 1367px) {

		HTML {
			margin:0px;
			padding:0px;
			width:100%;
			height:100%;
			font-size: 18px;
		}
		BODY {
			/* padding-top rimosso: #Header ora è "sticky" (nuovo layout 2026), non più "fixed" */
		}

	/*	------------------------------------------------------------- */
		.Container {
			display: block;
			max-width: 71.222rem;;
			margin-left: auto;
			margin-right: auto;
			margin-top: 2rem;
			margin-bottom: 5rem;
			padding-top: 0;
			color: var(--Page_Text_Color);
		}
		.Container H1.PageTitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 3.0rem;
			line-height: 1em;
			font-size: 3.5rem;
			font-weight: 900;
			color: var(--Page_Title_Color);
			text-align: left;
		}
		.Container H2.PageSubtitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 1.5rem;
			margin-top: -2rem;
			line-height: 1em;
			font-size: 2.3rem;
			font-weight: 400;
			color: var(--Page_Title_Color);
			text-align: left;
			font-style: italic;
		}

	}

/*	============================================================================ */
/*	NUOVO DESIGN SYSTEM "Fdo" (Festival dell'Oriente) — pagine ricostruite da zero
/*	dal bundle React di produzione (www.festivaldelloriente.it), a partire dal
/*	dump docs/dom/*.htm e dal CSS .newlayout/assets/index-hyXwmGwt.css.
/*
/*	Sostituisce integralmente il precedente sistema "Nl*" (homepage a blocchi
/*	editabili, rollback 22/07/2026): nomi di classe nuovi (prefisso "Fdo"), zero
/*	dipendenza dal gestore Pagine/repository per titolo.
/*
/*	Scope: SOLO le pagine con <body class="FdoPage">. Tutto qui sotto e' annidato
/*	sotto .FdoPage per non toccare le pagine del sito "storico" (Palette1 ecc.
/*	sopra in questo stesso file). Le custom property in :root sono innocue anche
/*	fuori scope (non renderizzano nulla se non referenziate).
/*
/*	Pagine che useranno questo sistema: homepage (oggi), poi (se il flusso
/*	funziona) le altre pagine convertite da docs/dom/*.htm.
/*	============================================================================ */

	:root {

	/*	Token verificati 1:1 contro :root in .newlayout/assets/index-hyXwmGwt.css */
		--color-bg: #052e5a;
		--color-hero-bleed-top: #063b73;
		--color-heading-alt: #052e5a;
		--color-h3: #ffbed8;
		--color-pink-soft: #ffc7dd;
		--color-body: #ffeaf3;
		--color-ticket-surface: #ffeaf3;
		--color-button-primary-bg: #b30000;
		--color-button-primary-text: #ffefef;
		--color-button-secondary-bg: #ffaece;
		--color-button-secondary-bg-hover: #ff8fbb;
		--color-button-secondary-text: #052e5a;
		--gradient-heading: linear-gradient(90deg, #d89958 13.14%, #8c5a30 38.47%, #a27544 43.68%, #dcbf7c 57.09%, #f4dc92 63.8%, #e6c880 69.76%, #c39752 82.42%, #b3803d 87.64%);
		--color-gold: #dcbf7c;
		--gradient-section-sticky: linear-gradient(180deg, #03162b 0%, #052e5a 100%);
		--color-navbar-pink-bg: #ffaece;
		--color-navbar-blue-bg: #052e5a;
		--color-card-activity: #011d3d;
		--color-card-prereg: #06396f;
		--color-border-accent: #ff63a2;

		--font-display: "Zen Antique", serif;
		--font-body: "Instrument Sans", sans-serif;

		--text-h1-size: 80px;
		--text-h1-line: 88px;
		--text-h1-weight: 400;
		--text-h2-size: 56px;
		--text-h2-line: 64px;
		--text-h2-weight: 400;
		--text-h3-size: 24px;
		--text-h3-line: 32px;
		--text-h3-weight: 400;
		--text-subtitle-size: 18px;
		--text-subtitle-line: 24px;
		--text-subtitle-weight: 400;
		--text-body-size: 16px;
		--text-body-line: 24px;
		--text-body-weight: 400;
		--text-body-bold-weight: 700;
		--text-button-size: 14px;
		--text-button-line: 18px;
		--text-button-weight: 600;
		--text-caption-size: 14px;
		--text-caption-line: 20px;
		--text-caption-weight: 400;

		--space-0: 0;
		--space-1: 4px;
		--space-2: 8px;
		--space-3: 12px;
		--space-4: 16px;
		--space-5: 24px;
		--space-6: 32px;
		--space-7: 48px;
		--space-8: 64px;
		--space-9: 96px;
		--space-10: 128px;

		--container-max: 1200px;
		--space-section: var(--space-9);
		--radius: 8px;
		--marquee-duration: 40s;

	/*	Breakpoint di riferimento (letterali nelle @media, le custom property non sono usabili li') */
	/*	tablet: 641px  ·  desktop: 1025px  ·  large: 1441px */

	}

/*	---------------------------------------------------------------------- */
/*	Reset di base, SOLO dentro .FdoPage
/*	---------------------------------------------------------------------- */

	.FdoPage, .FdoPage *, .FdoPage *:before, .FdoPage *:after { box-sizing: border-box; }
	.FdoPage { overflow-x: clip; background-color: var(--color-bg); color: var(--color-body); font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: var(--text-body-weight); -webkit-font-smoothing: antialiased; }
	.FdoPage h1, .FdoPage h2, .FdoPage h3, .FdoPage h4, .FdoPage h5, .FdoPage h6 { margin: 0; font-family: var(--font-display); font-weight: var(--text-h1-weight); }
	.FdoPage p { margin: 0; }
	.FdoPage img, .FdoPage picture, .FdoPage svg, .FdoPage video { display: block; max-width: 100%; }
	:where(.FdoPage) a { color: inherit; text-decoration: none; }
	:where(.FdoPage) button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; }
	.FdoPage ul, .FdoPage ol { list-style: none; margin: 0; padding: 0; }
	.FdoPage :focus-visible { outline: 2px solid var(--color-h3); outline-offset: 2px; }

/*	---------------------------------------------------------------------- */
/*	Componente "Section" — contenitore standard di sezione (usato dalla
/*	maggior parte dei blocchi: hero escluso, colonne intro escluse)
/*	---------------------------------------------------------------------- */

	.FdoSection { position: relative; z-index: 1; width: 100%; overflow-x: clip; padding: var(--space-7) var(--space-4); scroll-margin-top: 80px; }
	@media (min-width: 1025px) { .FdoSection { padding: var(--space-9) var(--space-6); } }
	.FdoSection--withBackground { background-image: var(--section-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; }
	.FdoSectionInner { width: 100%; max-width: var(--container-max); min-width: 0; margin: 0 auto; overflow-x: clip; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
	.FdoSectionInner--narrow { max-width: 48ch; }
	.FdoSectionSubtitle { margin: 0; font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); color: var(--color-h3); }
	.FdoSectionBody { margin: 0; font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-body); }
	.FdoSectionBody--narrow { max-width: 48ch; }
	.FdoCtaRow { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/*	---------------------------------------------------------------------- */
/*	Componente "Heading" — titoli con variante gradient/solid (usato ovunque)
/*	---------------------------------------------------------------------- */

	.FdoHeading { margin: 0; font-family: var(--font-display); text-wrap: balance; }
	.FdoHeading--h1 { font-size: clamp(40px, 8vw, var(--text-h1-size)); line-height: 1.1; font-weight: var(--text-h1-weight); }
	.FdoHeading--h2 { font-size: clamp(32px, 6vw, var(--text-h2-size)); line-height: 1.14; font-weight: var(--text-h2-weight); }
	.FdoHeading--solid { color: var(--color-heading-alt); }
	.FdoHeading--gradient { color: #d89958; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .1em; }

	.FdoFeatureTitle { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 34px; font-weight: var(--text-h2-weight); text-wrap: balance; color: #d89958; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
	.FdoFeatureSubtitle { margin: 0; font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: var(--text-body-weight); color: #ffeaf3; }

/*	---------------------------------------------------------------------- */
/*	Componente "Button" — CTA primario/secondario (usato ovunque)
/*	---------------------------------------------------------------------- */

	.FdoBtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: 2px solid transparent; border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-button-size); line-height: var(--text-button-line); font-weight: var(--text-button-weight); white-space: nowrap; transition: transform .15s ease, filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
	.FdoBtn--primary { background-color: var(--color-button-primary-bg); color: var(--color-button-primary-text); }
	.FdoBtn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
	.FdoBtn--secondary { background-color: var(--color-button-secondary-bg); color: var(--color-button-secondary-text); }
	.FdoBtn--secondary:hover { background-color: var(--color-button-secondary-bg-hover); transform: translateY(-1px); }
	.FdoBtn--outline { background-color: transparent; border-color: var(--color-button-secondary-bg); color: var(--color-button-secondary-bg); }
	.FdoBtn--outline:hover { background-color: transparent; border-color: var(--color-button-secondary-bg-hover); color: var(--color-button-secondary-bg-hover); transform: translateY(-1px); }
	.FdoBtn--menu { background-color: var(--color-button-primary-bg); color: var(--color-body); }
	/*	I bottoni-link (a.FdoBtn) devono mantenere il proprio colore ANCHE da :visited/:active:
		la regola legacy globale "a, a:visited, a:active { color: var(--Link_Text_Color) }" ha
		specificità 0,1,1 e batterebbe le varianti .FdoBtn--* (0,1,0), rendendo il testo scuro sui
		link già visitati (es. "Compra biglietto" di un evento già aperto). Qui specificità 0,2,1. */
	:where(.FdoPage) a.FdoBtn--primary:visited, :where(.FdoPage) a.FdoBtn--primary:active { color: var(--color-button-primary-text); }
	:where(.FdoPage) a.FdoBtn--secondary:visited, :where(.FdoPage) a.FdoBtn--secondary:active { color: var(--color-button-secondary-text); }
	:where(.FdoPage) a.FdoBtn--outline:visited, :where(.FdoPage) a.FdoBtn--outline:active { color: var(--color-button-secondary-bg); }
	:where(.FdoPage) a.FdoBtn--menu:visited, :where(.FdoPage) a.FdoBtn--menu:active { color: var(--color-body); }
	.FdoBtn:active { transform: translateY(0); }

/*	---------------------------------------------------------------------- */
/*	Componente "Marquee" — auto-scroll orizzontale in loop continuo (paesi,
/*	programma, street-food/mille-sapori). Un solo gruppo di card nel markup
/*	Twig; il duplicato per il loop e' generato via JS (vedi script marquee
/*	in fondo a home.htm). Punto 10 della richiesta: funzionante (su www non lo era).
/*	---------------------------------------------------------------------- */

	/*	Layout card INVARIATO (striscia orizzontale, riga unica). Base: scrollbar orizzontale visibile
		(overflow-x:auto) → senza JS (= modalità modifica) tutte le card sono raggiungibili scorrendo
		e restano gestibili normalmente. Il JS (FdoInitMarquee, dietro window.FdoEditMode) fa SOLO due
		cose aggiungendo .is-animating alla .FdoMarquee dopo il clone: (1) nasconde la scrollbar
		(overflow:hidden) e (2) attiva l'animazione. In edit-mode il JS non gira → niente animazione,
		scrollbar visibile. */
	.FdoMarquee { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: none; }
	.FdoMarquee.is-animating { overflow: hidden; }
	.FdoMarqueeTrack { display: flex; width: max-content; will-change: transform; }
	.FdoMarquee.is-animating .FdoMarqueeTrack { -webkit-animation: FdoMarqueeScroll var(--marquee-duration, 40s) linear infinite; animation: FdoMarqueeScroll var(--marquee-duration, 40s) linear infinite; }
	@media (hover: hover) and (pointer: fine) {
		.FdoMarquee:hover .FdoMarqueeTrack, .FdoMarquee:focus-within .FdoMarqueeTrack { -webkit-animation-play-state: paused; animation-play-state: paused; }
	}
	.FdoMarqueeGroup { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-4); padding-right: var(--space-4); }
	.FdoMarqueeGroup--stretch { align-items: stretch; }
	@-webkit-keyframes FdoMarqueeScroll { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); } }
	@keyframes FdoMarqueeScroll { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); } }
	/*	NB: nessun blocco @media (prefers-reduced-motion: reduce) qui: i marquee devono
		animarsi SEMPRE e su tutti i browser (richiesta esplicita), quindi l'animazione
		non viene disattivata dalla preferenza di sistema "riduci animazioni". */

/*	---------------------------------------------------------------------- */
/*	Componente "Scroller" — scroll orizzontale draggabile/con tastiera e
/*	scroll-snap (novita, video-festival). Punto 10: mantenuto funzionante.
/*	---------------------------------------------------------------------- */

	.FdoScroller { display: flex; justify-content: safe center; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-h3) transparent; padding: var(--space-2) 0 var(--space-4); }
	.FdoScroller::-webkit-scrollbar { height: 6px; }
	.FdoScroller::-webkit-scrollbar-thumb { background-color: var(--color-h3); border-radius: var(--radius); }
	.FdoScrollerTrack { display: flex; align-items: flex-start; gap: var(--space-5); width: max-content; }
	.FdoScrollerTrack > * { scroll-snap-align: center; flex-shrink: 0; }
	.FdoScrollerTrack--stretch { align-items: stretch; }
	@media (min-width: 1025px) { .FdoScroller { margin: 0; padding: var(--space-2) 0 var(--space-4); } }