/**
 * Destination single page — SPA-canonical styles.
 *
 * Mirrors components/Cities.jsx (CityPage + its child components) verbatim.
 * Loaded only on is_singular('destination') so every destination (Tirana,
 * Saranda, Berat, Ksamil, Theth, Vlora, Shkoder, Himara, etc.) gets the
 * same shape that the SPA renders.
 *
 * SPA breakpoint: window.innerWidth <= 900 → @media (max-width: 900px).
 * Where SPA uses `mobile ? X : Y`, desktop value is the default and the
 * mobile value goes in the @media block.
 *
 * Class prefix is `.dest-*` (existing in style.css) so destination pages
 * keep working during/after the port. SPA inline-style values win where
 * they conflict with the legacy rules in style.css — this stylesheet is
 * enqueued after va-style.
 */

/* ── 1. Hero (CityHero) ────────────────────────────────────────── */
.dest-hero {
	position: relative;
	/* -96px so hero fully covers the 96px header (no cream strip). Matches
	 * SPA Cities.jsx:93 after the cream-strip elimination. */
	margin-top: -96px;
	height: 80vh;
	min-height: 620px;
	overflow: hidden;
	color: #fff;
}
.dest-hero img,
.dest-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dest-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		var(--dest-hero-tint-top, rgba(8, 35, 56, 0.55)) 0%,
		var(--dest-hero-tint-mid, rgba(8, 35, 56, 0.15)) 40%,
		var(--dest-hero-tint-bottom, rgba(8, 35, 56, 0.8)) 100%
	);
}
.dest-hero-content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	/* Padding-bottom 78 (not 56) so the bottom-anchored .dest-hero-inner block
	 * lands at the same y as SPA's content div (CityHero in Cities.jsx). The
	 * SPA hero uses an inline-styled content wrapper that's shorter than the
	 * section and anchored via flex-end, ending up 22px higher than WP's
	 * inner block with the previous 56px padding. */
	padding: 140px 48px 78px;
}
.dest-hero-inner {
	margin-top: auto;
}
.dest-hero-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}
.dest-hero-breadcrumb a {
	color: rgba(255, 255, 255, 0.75);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	text-decoration: none;
}
.dest-hero-breadcrumb .sep { color: rgba(255, 255, 255, 0.4); }
.dest-hero-title {
	margin: 0;
	font-size: clamp(96px, 11vw, 180px);
	color: #fff;
	line-height: 0.95;
	letter-spacing: -0.03em;
}
.dest-hero-deck {
	font-style: italic;
	max-width: 640px;
	margin: 24px 0 0;
	font-size: 22px;
	color: #fff;
	line-height: 1.35;
}

/* ── 1.5 In-page TOC ───────────────────────────────────────────────
 * Sits between the hero and the quick-facts row. Horizontal strip of
 * anchor links to each major section. Sticky on desktop so the user
 * never has to scroll back up to navigate a long destination page.
 *
 * top: 80px parks it *below* the global sticky site header (80px tall,
 * sticky at top:0). Without the offset the TOC would slide behind the
 * header on scroll — visually it would just look like the header had
 * gone slightly taller. z-index keeps it below the header so the two
 * bars don't fight when scrolled. */
.dest-toc {
	position: sticky;
	top: 80px;
	z-index: 40;
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 14px 24px;
	background: var(--paper);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line);
	scrollbar-width: none;
}
.dest-toc::-webkit-scrollbar { display: none; }
.dest-toc a {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: color 200ms ease, border-color 200ms ease;
	white-space: nowrap;
}
.dest-toc a:hover,
.dest-toc a:focus-visible {
	color: var(--terracotta);
	border-bottom-color: var(--terracotta);
}
@media (min-width: 900px) {
	.dest-toc {
		padding: 16px 48px;
		gap: 28px;
		justify-content: flex-start;
	}
}

/* Anchor targets sit under the sticky TOC + global header; use scroll-padding
 * so #stay etc don't land hidden behind the bars. 80px header + 48px TOC. */
html { scroll-padding-top: 130px; }

/* ── 2. Quick facts row (CityQuickFacts) ───────────────────────── */
.dest-quick-facts {
	padding: 48px 48px 24px;
}
.dest-quick-facts-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: 1px solid var(--line);
	margin: 0;
	background: transparent;
}
.dest-quick-fact {
	padding: 28px 32px;
	border-right: 1px solid var(--line);
	background: transparent;
}
.dest-quick-fact:last-child { border-right: 0; }
.dest-quick-fact .eyebrow {
	font-size: 10px;
	letter-spacing: 0.12em;
	color: var(--city-primary, var(--terracotta));
}
.dest-quick-fact-value {
	margin-top: 8px;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: var(--ink);
}

/* ── 3. About (CityAbout) ──────────────────────────────────────── */
.dest-about {
	padding: 64px 48px;
	border-top: 0;
}
.dest-about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
}
.dest-about-head .eyebrow { font-size: 10px; }
.dest-about-heading {
	margin: 12px 0 0;
	font-size: 48px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	max-width: 420px;
}
.dest-about-body { font-size: 16px; }
.dest-about-body p:first-child { margin-top: 0; }

/* ── 4. Heritage (CityHeritage) ────────────────────────────────── */
.dest-heritage {
	padding: 96px 48px;
	background: var(--paper-warm);
	border-top: 1px solid var(--line);
}
.dest-heritage-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 72px;
}
.dest-heritage-heading {
	margin: 12px 0 0;
	font-size: 48px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	max-width: 460px;
}
.dest-heritage-lede {
	margin-top: 18px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--muted);
}
.dest-heritage-timeline {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}
.dest-heritage-timeline-label {
	font-size: 10px;
	color: var(--terracotta);
}
.dest-heritage-timeline ul {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
}
.dest-heritage-timeline li {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--line);
	font-size: 13px;
	line-height: 1.5;
}
.dest-heritage-timeline li:first-child { border-top: none; }
.dest-heritage-timeline-year {
	font-family: var(--font-mono);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink);
}
.dest-heritage-timeline-event { color: var(--muted); }
.dest-heritage-section {
	padding-top: 28px;
	padding-bottom: 28px;
	border-top: 1px solid var(--line);
}
.dest-heritage-section:first-child {
	padding-top: 0;
	border-top: none;
}
.dest-heritage-section-h {
	margin: 0;
	font-size: 26px;
	letter-spacing: -0.01em;
	font-weight: 400;
	line-height: 1.2;
}
.dest-heritage-section p {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.7;
}
.dest-heritage-epilogue {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 19px;
	line-height: 1.5;
	color: var(--ink);
}

/* ── 5. Stay / Eat / Do shared section wrappers ────────────────── */
/* SPA does NOT use a single .dest-section selector — every section sets its
   own padding. Override the legacy `.dest-section { padding:72px 48px; border-top }`
   from style.css so SPA values win for each section variant below. */
.dest-section { padding: 32px 48px 80px; border-top: 0; }

/* CityStay
 * Per-city surface tint was visible noise — pages now read as one paper-cream
 * column with the city colour only on accent text and the hero overlay. */
.dest-stay {
	padding: 32px 48px 80px;
	background: var(--paper);
	border-top: 0;
}
.dest-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 40px;
}
.dest-section-head h2 {
	margin: 10px 0 0;
	font-size: 44px;
	line-height: 1.05;
}
.dest-section-lede {
	max-width: 500px;
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--muted);
}

/* Inherit-friendly: when the section uses va_section_head() helper which emits
   `.section-head` markup, force SPA-canonical sizes for destination contexts. */
.dest-stay .section-head,
.dest-eat .section-head,
.dest-do .section-head,
.dest-getting .section-head,
.dest-nearby .section-head,
.dest-faq .section-head,
.dest-map-section .section-head,
.dest-featured-partners .section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 40px;
}
.dest-stay .section-head-title h2,
.dest-eat .section-head-title h2,
.dest-do .section-head-title h2,
.dest-getting .section-head-title h2,
.dest-nearby .section-head-title h2,
.dest-faq .section-head-title h2,
.dest-map-section .section-head-title h2,
.dest-featured-partners .section-head-title h2 {
	margin: 10px 0 0;
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-weight: 400;
}
.dest-map-section .section-head-title h2 { font-size: 36px; }

/* CityEat */
.dest-eat {
	padding: 56px 48px;
	border-top: 0;
}

/* CityDo — same paper background as Stay; see note above. */
.dest-do {
	padding: 48px 48px 80px;
	background: var(--paper);
	border-top: 0;
}

/* CityToursActivities — bookable routes */
.dest-bookable-tours {
	padding: 88px 48px;
	background: var(--paper-warm);
	border-top: 0;
}
.dest-bookable-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 18px;
	flex-wrap: wrap;
}
.dest-bookable-h2 {
	margin: 10px 0 0;
	font-size: 46px;
	line-height: 1.04;
	font-weight: 400;
}
.dest-bookable-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 34px;
}
.dest-bookable-card {
	display: block;
	border: 1px solid var(--line);
	background: var(--paper);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
}
.dest-bookable-card-img {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.dest-bookable-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dest-bookable-card-body { padding: 16px; }
.dest-bookable-card-eyebrow { font-size: 10px; }
.dest-bookable-card-h {
	margin: 8px 0 0;
	font-size: 22px;
	line-height: 1.08;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.dest-bookable-card-meta {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--muted);
}

/* CityGettingThere */
.dest-getting {
	padding: 56px 48px;
	border-top: 0;
}
.dest-getting-h2 {
	margin: 10px 0 40px;
	font-size: 44px;
	line-height: 1.05;
}

/* CityNearby */
.dest-nearby {
	padding: 32px 48px 80px;
	border-top: 0;
}
.dest-nearby-head { margin-bottom: 32px; }
.dest-nearby-h2 {
	margin: 10px 0 0;
	font-size: 44px;
	line-height: 1.05;
}

/* CityFAQ */
.dest-faq {
	padding: 64px 48px 96px;
	border-top: 0;
}
.dest-faq-h2 {
	margin: 10px 0 32px;
	font-size: 44px;
}

/* ── 6. Rent-a-car contextual (CityCarContextual) ──────────────── */
.dest-rentacar-teaser {
	padding: 80px 48px;
	border-top: 0;
}
.dest-rentacar-inner {
	display: flex;
	flex-direction: row;
	gap: 0;
	background: var(--ink);
	color: #fff;
	overflow: hidden;
}
.dest-rentacar-img {
	flex: 1.2;
	min-height: auto;
}
.dest-rentacar-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dest-rentacar-copy {
	flex: 1;
	padding: 56px 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.dest-rentacar-copy .eyebrow { color: rgba(255, 255, 255, 0.6); }
.dest-rentacar-title {
	margin: 12px 0 16px;
	font-size: 40px;
	color: #fff;
	line-height: 1.05;
	font-weight: 400;
	letter-spacing: -0.02em;
}
.dest-rentacar-copy p,
.dest-rentacar-copy .lede {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	max-width: 420px;
}
.dest-rentacar-copy .btn { margin-top: 24px; align-self: flex-start; }

/* ── 7. Invest cross-sell (CityInvestContextual) ───────────────── */
.dest-invest-crosssell {
	padding: 0 48px 80px;
	border-top: 0;
}
.dest-invest-inner {
	padding: 24px 32px;
	border: 1px solid var(--line);
	background: var(--paper-warm);
	border-left: 3px solid var(--terracotta);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.dest-invest-copy { flex: 1; }
.dest-invest-copy .eyebrow {
	font-size: 10px;
	color: var(--terracotta);
}
.dest-invest-copy .lede,
.dest-invest-copy > p {
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--ink);
	max-width: 560px;
	line-height: 1.5;
}
.dest-invest-title {
	margin: 12px 0 0;
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 400;
}
.dest-invest-meta {
	margin-top: 12px;
	font-size: 13px;
	color: var(--muted);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.dest-invest-ctas {
	margin-top: 20px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.dest-invest-img { flex-shrink: 0; max-width: 260px; }
.dest-invest-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* ── 8. Dental cross-sell (CityDentalContextual) ───────────────── */
.dest-dental-crosssell {
	padding: 0 48px 80px;
	border-top: 0;
}
.dest-dental-card {
	padding: 24px 32px;
	border: 1px solid var(--line);
	background: var(--paper-warm);
	border-left: 3px solid var(--terracotta);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-decoration: none;
	color: inherit;
}
.dest-dental-card .eyebrow {
	font-size: 10px;
	color: var(--terracotta);
}
.dest-dental-card p {
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--ink);
	max-width: 560px;
	line-height: 1.5;
}
.dest-dental-cta {
	font-size: 13px;
	font-weight: 600;
	color: var(--ionian);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── 9. Featured partners ──────────────────────────────────────── */
.dest-featured-partners {
	padding: 72px 48px;
	background: var(--paper-warm);
	border-top: 0;
}

/* ── 10. Map ───────────────────────────────────────────────────── */
.dest-map-section {
	padding: 32px 48px 80px;
	border-top: 0;
}
.dest-map-canvas {
	height: 420px;
	background: var(--stone-soft, #d6c9af);
	position: relative;
	overflow: hidden;
}
.dest-map-bg { position: absolute; inset: 0; }
.dest-map-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.dest-map-pin {
	position: absolute;
	transform: translate(-50%, -50%);
}
.dest-map-pin-dot {
	width: 14px;
	height: 14px;
	background: var(--city-accent, #c75a3c);
	border: 2px solid #fff;
	border-radius: 50%;
}
.dest-map-pin.is-unlabeled .dest-map-pin-dot {
	width: 8px;
	height: 8px;
}
.dest-map-pin-label {
	margin-top: 6px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 11px;
	color: var(--ink);
	white-space: nowrap;
}

/* ── 11. Connectivity strip (already styled in style.css) ──────── */
/* No overrides needed — .crossell-strip handled in style.css. */

/* ── Mobile: SPA breakpoint window.innerWidth <= 900 ──────────── */
@media (max-width: 900px) {
	/* Hero */
	.dest-hero {
		margin-top: -64px;
		height: 70vh;
		min-height: 540px;
	}
	.dest-hero-content { padding: 100px 24px 32px; }
	.dest-hero-title { font-size: clamp(64px, 20vw, 96px); }
	.dest-hero-deck { font-size: 17px; max-width: 100%; }

	/* Quick facts */
	.dest-quick-facts { padding: 32px 24px 8px; }
	.dest-quick-facts-row { grid-template-columns: 1fr 1fr; }
	.dest-quick-fact { padding: 20px 18px; }
	.dest-quick-fact:nth-child(2n) { border-right: 0; }
	.dest-quick-fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
	.dest-quick-fact-value { font-size: 20px; }

	/* About */
	.dest-about { padding: 40px 24px; }
	.dest-about-grid { grid-template-columns: 1fr; gap: 24px; }
	.dest-about-heading { font-size: 32px; }
	.dest-about-body { font-size: 15px; }

	/* Heritage */
	.dest-heritage { padding: 56px 24px; }
	.dest-heritage-grid { grid-template-columns: 1fr; gap: 28px; }
	.dest-heritage-heading { font-size: 32px; }
	.dest-heritage-lede { font-size: 15px; }
	.dest-heritage-timeline { margin-top: 24px; }
	.dest-heritage-section { padding-top: 22px; padding-bottom: 22px; }
	.dest-heritage-section-h { font-size: 22px; }
	.dest-heritage-section p { font-size: 15px; }
	.dest-heritage-epilogue { margin-top: 22px; padding-top: 22px; font-size: 17px; }

	/* Stay / Eat / Do / Bookable / Getting / Nearby / FAQ / Map */
	.dest-section { padding: 16px 24px 48px; }
	.dest-stay { padding: 16px 24px 48px; }
	.dest-eat { padding: 40px 24px; }
	.dest-do { padding: 32px 24px; }
	.dest-bookable-tours { padding: 48px 24px; }
	.dest-bookable-grid { grid-template-columns: 1fr; margin-top: 26px; }
	.dest-getting { padding: 40px 24px; }
	.dest-getting-h2 { font-size: 30px; }
	.dest-nearby { padding: 16px 24px 48px; }
	.dest-nearby-head { margin-bottom: 24px; }
	.dest-nearby-h2 { font-size: 30px; }
	.dest-faq { padding: 32px 24px 48px; }
	.dest-faq-h2 { font-size: 30px; }
	.dest-map-section { padding: 16px 24px 48px; }
	.dest-map-canvas { height: 320px; }
	.dest-section-head { margin-bottom: 28px; }
	.dest-section-head h2 { font-size: 30px; }
	.dest-bookable-h2 { font-size: 32px; }

	/* Rent-a-car teaser */
	.dest-rentacar-teaser { padding: 40px 24px; }
	.dest-rentacar-inner { flex-direction: column; }
	.dest-rentacar-img { min-height: 240px; }
	.dest-rentacar-copy { padding: 32px 24px; }
	.dest-rentacar-title { font-size: 28px; }

	/* Invest / Dental cross-sells */
	.dest-invest-crosssell,
	.dest-dental-crosssell { padding: 0 24px 40px; }
	.dest-invest-inner,
	.dest-dental-card {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px 24px;
	}
	.dest-invest-img { max-width: 100%; }
	.dest-invest-title { font-size: 28px; }

	/* Featured partners */
	.dest-featured-partners { padding: 48px 24px; }

	.dest-stay .section-head-title h2,
	.dest-eat .section-head-title h2,
	.dest-do .section-head-title h2,
	.dest-getting .section-head-title h2,
	.dest-nearby .section-head-title h2,
	.dest-faq .section-head-title h2,
	.dest-map-section .section-head-title h2,
	.dest-featured-partners .section-head-title h2 { font-size: 30px; }
	.dest-map-section .section-head-title h2 { font-size: 30px; }
}

/* ── Gallery (Through our lens) ──────────────────────────────────────────
 * Renders per-destination photos/videos from assets/destinations/{slug}/ as
 * a horizontal-scroll strip of 4:5 portrait tiles. Mobile: 1 visible per
 * panel. Desktop: ~4 visible with overflow scroll. Drops in additively —
 * no SPA equivalent (yet), so it's a WP-only extra. */
.dest-gallery {
	padding: 48px 24px 56px;
	background: var(--paper);
}
.dest-gallery-head {
	max-width: 1240px;
	margin: 0 auto 28px;
}
.dest-gallery-head .eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--muted);
}
.dest-gallery-title {
	margin: 10px 0 0;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--ink);
}
.dest-gallery-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 280px);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
}
.dest-gallery-item {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--paper-warm);
	scroll-snap-align: start;
}
.dest-gallery-item img,
.dest-gallery-item video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dest-gallery-item--video::after {
	content: "";
	position: absolute;
	inset: auto 12px 12px auto;
	width: 20px;
	height: 20px;
	background:
		linear-gradient(135deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%) center/12px 12px no-repeat,
		rgba(0,0,0,0.5);
	border-radius: 50%;
	pointer-events: none;
}
@media (min-width: 900px) {
	.dest-gallery { padding: 64px 48px 80px; }
	.dest-gallery-head { margin-bottom: 32px; }
	.dest-gallery-strip {
		max-width: 1440px;
		margin: 0 auto;
		/* Cap the column max so a single tile doesn't balloon to ~1300px and
		 * dominate the section (Dhërmi has one gallery file). With 4+ items
		 * the row still reads as a strip and overflows to horizontal scroll
		 * past 4 — exactly the "show 4 in-grid, scroll for more" intent. */
		grid-auto-columns: minmax(260px, 340px);
		justify-content: start;
		gap: 16px;
		padding-left: 0;
		padding-right: 0;
	}
}