.techie-accordion {
	--techie-accent: #111827;
	--techie-border: #ececf1;
	--techie-border-size: 0;
	--techie-gap: 12px;
	--techie-col-gap: var(--techie-gap);
	--techie-cols: 1;
	--techie-cols-tablet: 1;
	--techie-padding: 22px;
	--techie-radius: 14px;
	--techie-title-size: 17px;
	--techie-duration: 280ms;
	--techie-icon-color: var(--techie-accent);
	border: 0;
	display: grid;
	gap: var(--techie-gap) var(--techie-col-gap);
	grid-template-columns: repeat(var(--techie-cols), minmax(0, 1fr));
}

/* In a multi-column grid an opened item would otherwise stretch every other
   item on its row to match, so rows size to their own content instead. */
.techie-accordion--cols-2,
.techie-accordion--cols-3 {
	align-items: start;
}

/* ---- Item shell ---- */
.techie-accordion__item {
	background: var(--techie-item-bg, #fff);
	border: var(--techie-border-size) solid var(--techie-border);
	border-radius: var(--techie-radius);
	overflow: hidden;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.techie-accordion--shadow-soft .techie-accordion__item {
	box-shadow: var(--techie-shadow-sm);
}

.techie-accordion--shadow-strong .techie-accordion__item {
	box-shadow: var(--techie-shadow-md);
}

/* ---- Summary (header row) ---- */
.techie-accordion__summary {
	-webkit-tap-highlight-color: transparent;
	align-items: center;
	color: inherit;
	cursor: pointer;
	display: flex;
	gap: 14px;
	list-style: none;
	padding: var(--techie-sum-pad-y, 14px) var(--techie-padding);
	user-select: none;
}

.techie-accordion__summary::-webkit-details-marker {
	display: none;
}

.techie-accordion__summary:focus-visible {
	outline: 2px solid var(--techie-accent);
	outline-offset: -3px;
}

.techie-accordion__title {
	color: var(--techie-title-color, inherit);
	flex: 1 1 auto;
	font-size: var(--techie-title-size);
	font-weight: 700;
	line-height: 1.4;
	min-width: 0;
	text-align: left;
}

/* ---- Index badge ---- */
.techie-accordion__index {
	align-items: center;
	background: color-mix(in srgb, var(--techie-accent), #fff 82%);
	border-radius: 50%;
	color: var(--techie-accent);
	display: none;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 800;
	height: 34px;
	justify-content: center;
	order: -2;
	width: 34px;
}

.techie-accordion--numbered .techie-accordion__index,
.techie-accordion--boxed-icon .techie-accordion__index {
	display: inline-flex;
}


/* ---- Per-item icon chip ---- */
.techie-accordion__chip {
	align-items: center;
	background: var(--techie-chip-bg, color-mix(in srgb, var(--techie-accent), #fff 86%));
	border-radius: 10px;
	color: var(--techie-accent);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: calc(var(--techie-icon-size, 22px) * .8);
	height: calc(var(--techie-icon-size, 22px) + 14px);
	justify-content: center;
	line-height: 1;
	order: -3;
	width: calc(var(--techie-icon-size, 22px) + 14px);
}

.techie-accordion__chip svg {
	height: 60%;
	width: 60%;
}

/* ---- Toggle icon ---- */
.techie-accordion__icon {
	align-items: center;
	color: var(--techie-icon-color);
	display: inline-flex;
	flex: 0 0 auto;
	height: var(--techie-icon-size, 22px);
	justify-content: center;
	order: 5;
	transform-origin: center;
	transition: transform var(--techie-duration) ease;
	width: var(--techie-icon-size, 22px);
}

.techie-accordion--iconpos-left .techie-accordion__icon {
	order: -1;
}

.techie-accordion--icon-none .techie-accordion__icon {
	display: none;
}

.techie-accordion__icon::before {
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	content: "";
	height: calc(var(--techie-icon-size, 22px) * .42);
	transform: translateY(-25%) rotate(45deg);
	transform-origin: center;
	width: calc(var(--techie-icon-size, 22px) * .42);
}

.techie-accordion__item[open] .techie-accordion__icon {
	transform: rotate(180deg);
}

/* Plus / circle variants */
.techie-accordion--icon-plus .techie-accordion__icon::before,
.techie-accordion--icon-circle .techie-accordion__icon::before {
	border: 0;
	content: "+";
	font-size: var(--techie-icon-size, 22px);
	font-weight: 400;
	height: auto;
	line-height: 1;
	transform: none;
	width: auto;
}

.techie-accordion--icon-circle .techie-accordion__icon {
	background: color-mix(in srgb, var(--techie-accent), #fff 82%);
	border-radius: 50%;
	height: calc(var(--techie-icon-size, 22px) + 8px);
	width: calc(var(--techie-icon-size, 22px) + 8px);
}

.techie-accordion--icon-circle .techie-accordion__icon::before {
	font-size: calc(var(--techie-icon-size, 22px) * .82);
}

.techie-accordion--icon-plus .techie-accordion__item[open] .techie-accordion__icon,
.techie-accordion--icon-circle .techie-accordion__item[open] .techie-accordion__icon {
	transform: rotate(90deg);
}

.techie-accordion--icon-plus .techie-accordion__item[open] .techie-accordion__icon::before,
.techie-accordion--icon-circle .techie-accordion__item[open] .techie-accordion__icon::before {
	content: "\2212";
}

/* ---- Content (animated open/close, CSS only) ---- */
.techie-accordion__content {
	color: var(--techie-content-color, inherit);
}

/* Keep the panel in the render tree while closed so the grid-rows
   animation can run; native <details> would otherwise hard-hide it. */
.techie-accordion__item > .techie-accordion__content {
	content-visibility: visible;
}

.techie-accordion__inner {
	padding: 0 var(--techie-padding) var(--techie-padding);
}

.techie-accordion__inner > :last-child {
	margin-bottom: 0;
}

@supports (grid-template-rows: 0fr) {
	.techie-accordion__content {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--techie-duration) ease;
	}

	.techie-accordion__item[open] > .techie-accordion__content {
		grid-template-rows: 1fr;
	}

	.techie-accordion__inner {
		min-height: 0;
		overflow: hidden;
	}
}

/* ---- Hover ---- */
.techie-accordion--hover .techie-accordion__item:hover {
	border-color: color-mix(in srgb, var(--techie-accent), transparent 68%);
}

.techie-accordion--hover .techie-accordion__summary:hover .techie-accordion__title {
	color: var(--techie-accent);
}

.techie-accordion__item[open] > .techie-accordion__summary .techie-accordion__title {
	color: var(--techie-accent);
}

.techie-accordion--has-active-bg .techie-accordion__item[open] {
	background: var(--techie-active-bg);
}

/* ---- Style: line / flush ---- */
.techie-accordion--flush {
	gap: 0;
}

.techie-accordion--line .techie-accordion__item,
.techie-accordion--flush .techie-accordion__item {
	background: transparent;
	border-radius: 0;
	border-width: 0 0 var(--techie-border-size) 0;
	box-shadow: none;
}

/* ---- Style: modern highlight ---- */
.techie-accordion--modern .techie-accordion__item[open] {
	background: color-mix(in srgb, var(--techie-accent), #fff 90%);
	border-color: color-mix(in srgb, var(--techie-accent), transparent 55%);
}

/* ---- Style: glass ---- */
.techie-accordion--glass .techie-accordion__item {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, .72);
}

/* ---- Style: dark ---- */
.techie-accordion--dark .techie-accordion__item {
	background: #151922;
	border-color: rgba(255, 255, 255, .14);
	color: #fff;
}

.techie-accordion--dark .techie-accordion__index {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.techie-accordion--dark .techie-accordion--hover .techie-accordion__summary:hover .techie-accordion__title,
.techie-accordion--dark .techie-accordion__item[open] > .techie-accordion__summary .techie-accordion__title {
	color: #fff;
}


/* ==================== DESIGN PRESETS ==================== */
/* Presets override surface tokens; icon style/position, colors,
   spacing, duration and behaviour options all still apply. */

/* 1. Minimal FAQ — hairline dividers, airy, no chrome */
.techie-accordion--preset-minimal-faq {
	gap: 0;
}

.techie-accordion--preset-minimal-faq .techie-accordion__item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--techie-accent), #fff 86%);
	border-radius: 0;
	box-shadow: none;
}

.techie-accordion--preset-minimal-faq .techie-accordion__summary {
	padding-left: 0;
	padding-right: 0;
}

.techie-accordion--preset-minimal-faq .techie-accordion__inner {
	padding-left: 0;
	padding-right: 0;
}

/* 2. Card Style — classic white cards */
.techie-accordion--preset-card .techie-accordion__item {
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 88%);
	border-radius: var(--techie-radius);
	box-shadow: var(--techie-shadow-xs);
}

/* 3. Bordered — strong outline, flat */
.techie-accordion--preset-bordered .techie-accordion__item {
	border: 2px solid color-mix(in srgb, var(--techie-accent), #fff 70%);
	border-radius: 12px;
	box-shadow: none;
}

.techie-accordion--preset-bordered .techie-accordion__item[open] {
	border-color: var(--techie-accent);
}

/* 4. Shadow Card — borderless, floating shadow */
.techie-accordion--preset-shadow-card {
	gap: 16px;
}

.techie-accordion--preset-shadow-card .techie-accordion__item {
	border: 0;
	border-radius: 16px;
	box-shadow: var(--techie-shadow-md);
}

/* 5. Left Icon — icon leads the row in a tinted disc */
.techie-accordion--preset-left-icon .techie-accordion__icon {
	background: color-mix(in srgb, var(--techie-accent), #fff 84%);
	border-radius: 50%;
	height: calc(var(--techie-icon-size, 22px) + 10px);
	order: -1;
	width: calc(var(--techie-icon-size, 22px) + 10px);
}

.techie-accordion--preset-left-icon .techie-accordion__item {
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 88%);
	border-radius: var(--techie-radius);
}

/* 6. Numbered — index badges on cards */
.techie-accordion--preset-numbered .techie-accordion__index {
	display: inline-flex;
}

.techie-accordion--preset-numbered .techie-accordion__item {
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 88%);
	border-radius: var(--techie-radius);
}

/* 7. Floating Card — lifts on hover/open */
.techie-accordion--preset-floating {
	gap: 16px;
}

.techie-accordion--preset-floating .techie-accordion__item {
	border: 0;
	border-radius: 18px;
	box-shadow: var(--techie-shadow-sm);
	transition: box-shadow var(--techie-duration) ease, transform var(--techie-duration) ease;
}

.techie-accordion--preset-floating .techie-accordion__item:hover,
.techie-accordion--preset-floating .techie-accordion__item[open] {
	box-shadow: var(--techie-shadow-lg);
	transform: translateY(-3px);
}

/* 8. Glassmorphism — translucent blur panels */
.techie-accordion--preset-glass .techie-accordion__item {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 16px;
	box-shadow: var(--techie-shadow-sm);
}

/* 9. Timeline — items hang off a vertical accent rail */
.techie-accordion--preset-timeline {
	padding-left: 26px;
	position: relative;
}

.techie-accordion--preset-timeline::before {
	background: color-mix(in srgb, var(--techie-accent), #fff 78%);
	border-radius: 999px;
	bottom: 8px;
	content: "";
	left: 7px;
	position: absolute;
	top: 8px;
	width: 3px;
}

.techie-accordion--preset-timeline .techie-accordion__item {
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 88%);
	border-radius: var(--techie-radius);
	overflow: visible;
	position: relative;
}

.techie-accordion--preset-timeline .techie-accordion__item::before {
	background: color-mix(in srgb, var(--techie-accent), #fff 78%);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--techie-accent), #fff 70%);
	content: "";
	height: 15px;
	left: -26px;
	position: absolute;
	top: calc(var(--techie-sum-pad-y, 14px) + .45em);
	width: 15px;
}

.techie-accordion--preset-timeline .techie-accordion__item[open]::before {
	background: var(--techie-accent);
}

/* 10. Stacked Cards — layered card edge beneath each item */
.techie-accordion--preset-stacked {
	gap: 18px;
}

.techie-accordion--preset-stacked .techie-accordion__item {
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 86%);
	border-radius: 14px;
	box-shadow: 0 5px 0 -2px color-mix(in srgb, var(--techie-accent), #fff 86%), 0 10px 0 -5px color-mix(in srgb, var(--techie-accent), #fff 92%);
}

/* 11. Corporate FAQ — grouped panel with internal dividers */
.techie-accordion--preset-corporate {
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 86%);
	border-radius: var(--techie-radius);
	gap: 0;
	overflow: hidden;
}

.techie-accordion--preset-corporate .techie-accordion__item {
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--techie-accent), #fff 88%);
	border-radius: 0;
	box-shadow: none;
}

.techie-accordion--preset-corporate .techie-accordion__item:last-child {
	border-bottom: 0;
}

.techie-accordion--preset-corporate .techie-accordion__summary {
	background: color-mix(in srgb, var(--techie-accent), #fff 96%);
}

.techie-accordion--preset-corporate .techie-accordion__item[open] > .techie-accordion__summary {
	background: transparent;
}

/* 12. Premium SaaS FAQ — accent inset bar + tinted open state */
.techie-accordion--preset-saas .techie-accordion__item {
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 88%);
	border-radius: 14px;
	transition: background-color var(--techie-duration) ease, border-color var(--techie-duration) ease, box-shadow var(--techie-duration) ease;
}

.techie-accordion--preset-saas .techie-accordion__item[open] {
	background: color-mix(in srgb, var(--techie-accent), #fff 96%);
	border-color: color-mix(in srgb, var(--techie-accent), #fff 62%);
	box-shadow: inset 3px 0 0 var(--techie-accent), 0 12px 28px rgba(16, 24, 40, .08);
}


/* 13. Pill FAQ (Spotlight) — rounded pills, open item elevated with accent ring */
.techie-accordion--preset-pill {
	gap: 14px;
}

.techie-accordion--preset-pill .techie-accordion__item {
	background: color-mix(in srgb, var(--techie-accent), #fff 97%);
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 92%);
	border-radius: 32px;
	box-shadow: none;
	transition: background-color var(--techie-duration) ease, box-shadow var(--techie-duration) ease, border-color var(--techie-duration) ease, transform var(--techie-duration) ease;
}

.techie-accordion--preset-pill .techie-accordion__index {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 78%);
	display: inline-flex;
	font-size: 12px;
	height: 28px;
	width: 28px;
}

.techie-accordion--preset-pill .techie-accordion__icon {
	background: var(--techie-accent);
	border-radius: 50%;
	color: #fff;
	height: calc(var(--techie-icon-size, 22px) + 10px);
	width: calc(var(--techie-icon-size, 22px) + 10px);
}

.techie-accordion--preset-pill .techie-accordion__item[open] {
	background: #fff;
	border-color: color-mix(in srgb, var(--techie-accent), #fff 55%);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--techie-accent), transparent 84%), 0 18px 40px rgba(16, 24, 40, .12);
	transform: scale(1.015);
}

.techie-accordion--preset-pill .techie-accordion__item[open] .techie-accordion__icon {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 70%);
	color: var(--techie-accent);
}

/* 14. Ghost Numbers — oversized soft numerals, tinted cards */
.techie-accordion--preset-ghost-number {
	gap: 18px;
}

.techie-accordion--preset-ghost-number .techie-accordion__item {
	background: color-mix(in srgb, var(--techie-accent), #fff 95%);
	border: 0;
	border-radius: 20px;
	box-shadow: none;
}

.techie-accordion--preset-ghost-number .techie-accordion__index {
	background: transparent;
	border-radius: 0;
	color: color-mix(in srgb, var(--techie-accent), #fff 62%);
	display: inline-flex;
	font-size: calc(var(--techie-title-size) * 2.3);
	font-weight: 800;
	height: auto;
	letter-spacing: -.02em;
	line-height: 1;
	width: auto;
}

.techie-accordion--preset-ghost-number .techie-accordion__item[open] {
	background: color-mix(in srgb, var(--techie-accent), #fff 91%);
}

.techie-accordion--preset-ghost-number .techie-accordion__item[open] .techie-accordion__index {
	color: color-mix(in srgb, var(--techie-accent), #fff 30%);
}

.techie-accordion--preset-ghost-number .techie-accordion__icon {
	background: color-mix(in srgb, var(--techie-accent), #fff 80%);
	border-radius: 50%;
	height: calc(var(--techie-icon-size, 22px) + 6px);
	width: calc(var(--techie-icon-size, 22px) + 6px);
}

/* 15. Icon Chip Stack — active row pops out of a soft stack */
.techie-accordion--preset-chip-stack {
	gap: 10px;
}

.techie-accordion--preset-chip-stack .techie-accordion__item {
	background: color-mix(in srgb, var(--techie-accent), #fff 96%);
	border: 0;
	border-radius: 14px;
	box-shadow: none;
	opacity: .78;
	transition: opacity var(--techie-duration) ease, box-shadow var(--techie-duration) ease, transform var(--techie-duration) ease, background-color var(--techie-duration) ease;
}

.techie-accordion--preset-chip-stack .techie-accordion__item:hover {
	opacity: 1;
}

.techie-accordion--preset-chip-stack .techie-accordion__item[open] {
	background: #fff;
	box-shadow: var(--techie-shadow-md);
	opacity: 1;
	transform: scale(1.03);
	z-index: 1;
}

.techie-accordion--preset-chip-stack .techie-accordion__index {
	display: none;
}

/* 16. Icon Chip List — clean white rows, tinted icon chips, quiet chevrons */
.techie-accordion--preset-icon-chip {
	gap: 12px;
}

.techie-accordion--preset-icon-chip .techie-accordion__item {
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 90%);
	border-radius: 14px;
	box-shadow: var(--techie-shadow-xs);
}

.techie-accordion--preset-icon-chip .techie-accordion__icon {
	color: color-mix(in srgb, var(--techie-accent), #fff 40%);
}

.techie-accordion--preset-icon-chip .techie-accordion__item[open] {
	border-color: color-mix(in srgb, var(--techie-accent), #fff 62%);
}

/* 17. Image Panels — horizontal expanding image accordion */
.techie-accordion--preset-panels {
	display: flex;
	flex-direction: row;
	gap: 8px;
	min-height: var(--techie-panels-height, 460px);
}

.techie-accordion--preset-panels .techie-accordion__item {
	background: #4b4b4b;
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	display: flex;
	flex: 1 1 0;
	min-width: 72px;
	overflow: hidden;
	position: relative;
	transition: flex-grow var(--techie-duration) ease;
}

.techie-accordion--preset-panels .techie-accordion__item::before {
	background-image: var(--techie-item-image, none);
	background-position: center;
	background-size: cover;
	content: "";
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity var(--techie-duration) ease;
}

.techie-accordion--preset-panels .techie-accordion__item[open] {
	flex-grow: 7;
}

.techie-accordion--preset-panels .techie-accordion__item[open]::before {
	opacity: 1;
}

.techie-accordion--preset-panels .techie-accordion__summary {
	align-items: flex-start;
	color: #fff;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	padding: 22px 18px;
	position: relative;
	z-index: 1;
}

.techie-accordion--preset-panels .techie-accordion__title {
	color: #fff;
	font-size: var(--techie-title-size);
	font-weight: 700;
	text-align: left;
	transition: font-size var(--techie-duration) ease;
	writing-mode: vertical-rl;
}

.techie-accordion--preset-panels .techie-accordion__item[open] .techie-accordion__title {
	font-size: calc(var(--techie-title-size) * 2.4);
	text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
	writing-mode: horizontal-tb;
}

.techie-accordion--preset-panels .techie-accordion__item[open] > .techie-accordion__summary .techie-accordion__title {
	color: #fff;
}

.techie-accordion--preset-panels .techie-accordion__index {
	background: transparent;
	color: #fff;
	display: inline-flex;
	font-size: 22px;
	font-weight: 800;
	height: auto;
	order: 9;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
	width: auto;
}

.techie-accordion--preset-panels .techie-accordion__icon,
.techie-accordion--preset-panels .techie-accordion__chip,
.techie-accordion--preset-panels .techie-accordion__content {
	display: none;
}

@media (max-width: 767px) {
	.techie-accordion--preset-panels {
		flex-direction: column;
		min-height: 0;
	}

	.techie-accordion--preset-panels .techie-accordion__item {
		min-height: 64px;
		min-width: 0;
	}

	.techie-accordion--preset-panels .techie-accordion__item[open] {
		min-height: 320px;
	}

	.techie-accordion--preset-panels .techie-accordion__title {
		writing-mode: horizontal-tb;
	}
}

/* ---- Responsive ---- */
@media (max-width: 549px) {
	.techie-accordion__title {
		font-size: var(--techie-title-size-m, var(--techie-title-size));
	}

	.techie-accordion__summary {
		gap: 10px;
	}

	.techie-accordion--preset-timeline {
		padding-left: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.techie-accordion__content,
	.techie-accordion__icon,
	.techie-accordion__item {
		transition: none;
	}
}


/* ---- Preset: FAQ Grid ---- */
.techie-accordion--preset-faq-grid .techie-accordion__item {
	background: #fff;
	border: var(--techie-border-size, 1px) solid var(--techie-border);
	border-radius: var(--techie-radius);
	box-shadow: var(--techie-shadow-xs);
	transition: border-color .2s var(--techie-ease, ease), box-shadow .2s var(--techie-ease, ease), transform .2s var(--techie-ease, ease);
}

.techie-accordion--preset-faq-grid.techie-accordion--hover .techie-accordion__item:hover {
	border-color: color-mix(in srgb, var(--techie-accent), transparent 66%);
	box-shadow: var(--techie-shadow-sm);
}

.techie-accordion--preset-faq-grid .techie-accordion__item[open] {
	border-color: color-mix(in srgb, var(--techie-accent), transparent 58%);
	box-shadow: var(--techie-shadow-sm);
}

.techie-accordion--preset-faq-grid .techie-accordion__summary {
	gap: 18px;
	padding: var(--techie-sum-pad-y, 18px) var(--techie-padding);
}

.techie-accordion--preset-faq-grid .techie-accordion__title {
	font-weight: 700;
	letter-spacing: -.005em;
	line-height: 1.4;
}

.techie-accordion--preset-faq-grid .techie-accordion__icon {
	color: var(--techie-icon-color);
	flex: 0 0 auto;
	opacity: .95;
}

.techie-accordion--preset-faq-grid .techie-accordion__content {
	color: var(--techie-content-color, #55617a);
}

.techie-accordion--preset-faq-grid > .techie-accordion__item > .techie-accordion__content .techie-accordion__inner {
	padding: 0 var(--techie-padding) var(--techie-padding);
}

/* ---- Responsive columns ---- */
@media (max-width: 1024px) {
	.techie-accordion--cols-2,
	.techie-accordion--cols-3 {
		grid-template-columns: repeat(var(--techie-cols-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.techie-accordion--cols-2,
	.techie-accordion--cols-3 {
		grid-template-columns: 1fr;
	}
}