:root {

	/* ── Border Radius ──────────────────────────────────────────────────────── */

	--bdr-rds: 1.111rem; /* { min: 0,  max: 5, step: 0.1, friendly: 'Border Radius', group: 'Calculations' } */
	--bdr-tl-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Top Left Corner', group: 'Calculations' } */
	--bdr-tr-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Top Right Corner', group: 'Calculations' } */
	--bdr-br-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Bottom Right Corner', group: 'Calculations' } */
	--bdr-bl-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Bottom Left Corner', group: 'Calculations' } */

	/* ── Card Border Radius ─────────────────────────────────────────────────── */

	--bdr-rds-crd: .89rem; /* { min: 0,  max: 5, step: 0.1, friendly: 'Card Border Radius', group: 'Calculations' } */
	--bdr-tl-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Top Left Corner', group: 'Calculations' } */
	--bdr-tr-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Top Right Corner', group: 'Calculations' } */
	--bdr-br-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Bottom Right Corner', group: 'Calculations' } */
	--bdr-bl-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Bottom Left Corner', group: 'Calculations' } */

	/* ── Box Shadow ─────────────────────────────────────────────────────────── */

	--bx-sdw-x: 0em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Box Shadow \'X\' Position', group: 'Box Shadow' } */
	--bx-sdw-y: 0.875em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Box Shadow \'Y\' Position', group: 'Box Shadow' } */
	--bx-sdw-blr: 1.5em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Box Shadow Blur', group: 'Box Shadow' } */
	--bx-sdw-o: 0.2; /* { min: 0,  max: 1, step: 0.05, friendly: 'Box Shadow Opacity', group: 'Box Shadow' } */

	--bx-sdw-dsk-x: 0em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow \'X\' Position', group: 'Box Shadow' } */
	--bx-sdw-dsk-y: 0.4em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow \'Y\' Position', group: 'Box Shadow' } */
	--bx-sdw-dsk-blr: 1.333em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow Blur', group: 'Box Shadow' } */
	--bx-sdw-dsk-o: 0.2; /* { min: 0,  max: 1, step: 0.05, friendly: 'Desktop Only Box Shadow Opacity', group: 'Box Shadow' } */

	/* ── Card Box Shadow ────────────────────────────────────────────────────── */

	--bx-sdw-crd-x: 0.2em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Card Box Shadow \'X\' Position', group: 'Box Shadow' } */
	--bx-sdw-crd-y: 0.2em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Card Box Shadow \'Y\' Position', group: 'Box Shadow' } */
	--bx-sdw-crd-blr: 0.5em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Card Box Shadow Blur', group: 'Box Shadow' } */
	--bx-sdw-crd-o: 0; /* { min: 0,  max: 1, step: 0.05, friendly: 'Card Box Shadow Opacity', group: 'Box Shadow' } */

	/* ── Button V1 Padding ──────────────────────────────────────────────────── */

	--btn-v1-pd-t: 0.889rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Top' } */
	--btn-v1-pd-b: 0.889rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Bottom' } */
	--btn-v1-pd-l: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V1 Padding Left' } */
	--btn-v1-pd-r: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V1 Padding Right' } */
	--btn-v1-pd: var(--btn-v1-pd-t) var(--btn-v1-pd-r) var(--btn-v1-pd-b) var(--btn-v1-pd-l); /* { readonly: true } */

	/* ── Button V1 Border Radius ────────────────────────────────────────────── */

	--btn-v1-bdr-rds-tl: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V1 Border Radius Top Left' } */
	--btn-v1-bdr-rds-tr: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V1 Border Radius Top Right' } */
	--btn-v1-bdr-rds-br: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V1 Border Radius Bottom Right' } */
	--btn-v1-bdr-rds-bl: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V1 Border Radius Bottom Left' } */
	--btn-v1-bdr-rds: var(--btn-v1-bdr-rds-tl) var(--btn-v1-bdr-rds-tr) var(--btn-v1-bdr-rds-br) var(--btn-v1-bdr-rds-bl); /* { readonly: true } */

	/* ── Button V1 Box Shadow ───────────────────────────────────────────────── */

	--btn-v1-bx-sdw-x: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'X\' Position' } */
	--btn-v1-bx-sdw-y: 0.25rem; /* { min: 0, max: 2, step: 0.05, friendly: 'Button V1 Box Shadow \'Y\' Position' } */
	--btn-v1-bx-sdw-blr: 0.875rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V1 Box Shadow Blur' } */
	--btn-v1-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V1 Box Shadow Opacity' } */

	/* ── Button V1 Border (Alt Variant) ─────────────────────────────────────── */

	--btn-v1-bdr-w: 2px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V1 Border Width' } */
	--btn-v1-bdr-stl: solid; /* { friendly: 'Button V1 Border Style' } */

	/* ── Button V2 Padding ──────────────────────────────────────────────────── */

	--btn-v2-pd-t: 0.889rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Top'  } */
	--btn-v2-pd-b: 0.889rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Bottom'  } */
	--btn-v2-pd-l: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V2 Padding Left'  } */
	--btn-v2-pd-r: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V2 Padding Right'  } */
	--btn-v2-pd: var(--btn-v2-pd-t) var(--btn-v2-pd-r) var(--btn-v2-pd-b) var(--btn-v2-pd-l); /* { readonly: true  } */

	/* ── Button V2 Border Radius ────────────────────────────────────────────── */

	--btn-v2-bdr-rds-tl: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Top Left'  } */
	--btn-v2-bdr-rds-tr: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Top Right'  } */
	--btn-v2-bdr-rds-br: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Bottom Right'  } */
	--btn-v2-bdr-rds-bl: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Bottom Left'  } */
	--btn-v2-bdr-rds: var(--btn-v2-bdr-rds-tl) var(--btn-v2-bdr-rds-tr) var(--btn-v2-bdr-rds-br) var(--btn-v2-bdr-rds-bl); /* { readonly: true  } */

	/* ── Button V2 Box Shadow ───────────────────────────────────────────────── */

	--btn-v2-bx-sdw-x: 0rem; /* { min: 0,  max: 2, step: 0.1, friendly: 'Button V2 Box Shadow \'X\' Position' } */
	--btn-v2-bx-sdw-y: 0.25rem; /* { min: 0,  max: 2, step: 0.05, friendly: 'Button V2 Box Shadow \'Y\' Position' } */
	--btn-v2-bx-sdw-blr: 0.875rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V2 Box Shadow Blur' } */
	--btn-v2-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V2 Box Shadow Opacity' } */

	--btn-v2-bdr-w: 2px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V2 Border Width'  } */
	--btn-v2-bdr-stl: solid; /* { friendly: 'Button V2 Border Style'  } */

	/* ── Button Transitions ─────────────────────────────────────────────────── */

	--btn-trn-sp: 0.3s; /* { min: 0, max: 1, step: 0.05, friendly: 'Button Transition Speed' } */
	--btn-trn-tf: ease; /* { friendly: 'Button Transition Timing Function' } */

	/* ── Flair (Shapes & Decorative) ────────────────────────────────────────── */

	--flr-bx-w: 64; /* { min: 100, max: 800, step: 1, friendly: 'Flair Width Desktop', group: 'Shapes & Decorative' } */
	--flr-bx-w-mbl: 54; /* { min: 100, max: 600, step: 1, friendly: 'Flair Width Mobile', group: 'Shapes & Decorative' } */
	--flr-bx-w-clc: calc((var(--flr-bx-w-mbl) * 1px) + (var(--flr-bx-w) - var(--flr-bx-w-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */
	--flr-mrg-tp: 0rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Flair Margin Top', group: 'Shapes & Decorative' } */
	--flr-mrg-bt: 1rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Flair Margin Bottom', group: 'Shapes & Decorative' } */
	--flr-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 11' fill='none'><path fill='black' d='M23.013 4.31724L19.5685 14.3761H3.4445L0 4.31724L6.93544 8.12925L11.5065 0L16.0775 8.13005L23.013 4.31804V4.31724Z'/></svg>"); /* { friendly: 'Flair Mask Image (Data URI)', group: 'Shapes & Decorative' } */

	/* ── Containers & Cards Border ──────────────────────────────────────────── */

	--bg-bx-bdr-thc: 4px; /* { min: 1, max: 20, step: 1, friendly: 'BG Box Border Width' } */
	--bg-bx-bdr-clr-o: 1; /* { min: 0.1, max: 1, step: 0.1, friendly: 'BG Box Border Opacity' } */
	--crd-bdr-w: 1px; /* { min: 1, max: 4, step: 1, friendly: 'Card Border Width', group: 'Containers & Cards Border' } */

	/* ── Dividers & Separators ──────────────────────────────────────────────── */

	--bdr-stl: solid; /* { friendly: 'Border Style', group: 'Borders' } */
	--bdr-w: 1px; /* { min: 1, max: 4, step: 1, friendly: 'Border Width', group: 'Borders' } */
	--bdr-clr-o: 0.3; /* { min: 0.05, max: 1, step: 0.05, friendly: 'Border Opacity', group: 'Borders' } */

}

[class*="fnt_"] {
	em {
		font-style: normal;
		color: var(--fnt-t-k);
	}
}

[data-colors*="-dark"] {
	.fnt_t-k {
		--title-color: var(--fnt-t-1);

	}

}

body {
	font-feature-settings: 'liga' off, 'clig' off;
}

/* ── Bottom Decoration (wave divider) ──────────────────────────────────── */

.btm-deco {
	position: absolute;
	bottom: -1px;
	z-index: 0;
	width: 100%;

	svg {
		width: 100%;
		height: 18.722rem;
		display: block;
	}

	@media screen and (max-width: 1279px) {
		margin-top: 2rem;
	}
}

/* Match the bottom-decoration shape to the next panel's background so the wave
   merges into it instead of reading as an accent stripe. */
section:has(> .btm-deco) {
	&:has(+ section[data-colors="primary-light"])   { --shape-clr-1-dyn: var(--lt-bg); }
	&:has(+ section[data-colors="alternate-light"]) { --shape-clr-1-dyn: var(--lt-alt-bg); }
	&:has(+ section[data-colors="primary-dark"])    { --shape-clr-1-dyn: var(--dk-bg); }
	&:has(+ section[data-colors="alternate-dark"])  { --shape-clr-1-dyn: var(--dk-alt-bg); }
}

/* When the btm-deco panel is the last thing in <main>, its visual neighbor is
   the first section of <footer>. Must set the var directly on the section
   (the @scope rule in color-structure.css sets --shape-clr-1-dyn on the
   section element itself, so a value set on a parent like <form> would be
   shadowed). Two paired selectors handle "section is direct last-child of
   main" and "section is wrapped (e.g. in <form>) as main's last-child". */
main:has(+ footer section[data-colors="primary-light"]:first-of-type)   > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="primary-light"]:first-of-type)   > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--lt-bg); }
main:has(+ footer section[data-colors="alternate-light"]:first-of-type) > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="alternate-light"]:first-of-type) > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--lt-alt-bg); }
main:has(+ footer section[data-colors="primary-dark"]:first-of-type)    > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="primary-dark"]:first-of-type)    > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--dk-bg); }
main:has(+ footer section[data-colors="alternate-dark"]:first-of-type)  > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="alternate-dark"]:first-of-type)  > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--dk-alt-bg); }

/* ── Wave Banner Decoration (banner wave divider) ──────────────────────── */

.wv-bnr {
	--wv-bnr-grad-start: var(--background);
	--wv-bnr-grad-end: var(--inner-theme);

	pointer-events: none;

	svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	.wv-bnr-stop-start {
		stop-color: var(--wv-bnr-grad-start);
	}

	.wv-bnr-stop-end {
		stop-color: var(--wv-bnr-grad-end);
	}
}

/* Content Info Callout */
.cnt-info {
	border-radius: 1.25rem;
	padding: 2.5rem 3.125rem;
	text-align: center;

	p {
		margin: 0;
		font-weight: 600;
		line-height: 1.75;
	}

	@media screen and (max-width: 699px) {
		padding: 1.5rem;
	}
}

/* Bullet Styles */
.cnt-stl {
	ul.spl-lst li {
		padding-left: 2.75rem;
		line-height: 1.7;
	}

	ul {
		li {
			&::before {
				left: 0;
				top: 0.35em;
				width: 1.4375rem;
				height: 1.4rem;
				background-color: currentColor;
				color: var(--blt-clr);
				mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none'><path d='M144.511 111.163C129.865 140.721 93.6526 155.732 59.0012 147.995C58.3768 147.712 59.0532 140.387 59.0532 139.616C59.1053 135.786 59.1573 131.931 59.1313 128.101C59.1313 122.01 59.2353 115.841 60.484 109.853C61.0563 107.051 61.8888 104.275 63.1115 101.654C63.7098 100.394 66.0251 95.048 67.586 94.8424C78.5641 93.3259 92.56 93.4544 97.1125 81.1429C100.156 72.9181 96.6183 62.7142 90.0886 57.0853C80.5673 48.9119 70.1875 54.7978 61.7587 61.352C59.8857 62.817 58.0387 64.3077 56.1136 65.7214C52.5236 68.4201 41.5714 63.0483 38.3977 66.1326C24.766 79.3951 39.6724 111.215 36.8108 138.871C10.8222 123.218 -4.26624 93.0175 1.06675 61.6604C6.08756 32.0254 29.1105 6.45134 61.8108 0C57.3102 27.0391 73.3352 24.6744 74.9481 49.426C88.2416 48.475 98.1531 55.646 101.379 65.7728C103.46 72.3269 102.289 78.7269 98.7254 84.5356C96.9564 87.4143 94.7972 90.0617 92.638 92.6576C89.8285 96.0247 87.0969 98.3379 87.6432 103.041C88.1115 106.923 89.8024 110.624 91.7795 113.939C95.2655 119.8 101.509 127.767 108.975 128.538C124.454 130.132 128.148 114.068 144.511 111.189V111.163Z' fill='black'/><path d='M150 47.2413C139.88 48.8348 128.642 44.1056 122.112 37.9627C113.32 29.635 110.848 18.403 113.372 6.914C130.619 15.7043 142.716 28.4784 149.974 47.2413H150Z' fill='black'/><path d='M131.946 90.6015C130.723 98.8777 119.199 115.584 110.38 109.21C102.107 103.247 109.625 83.2505 116.077 77.1076C117.95 75.3342 121.384 74.8715 123.829 75.3342C126.275 75.7968 128.356 77.1076 129.787 79.0096C132.232 82.2481 132.518 86.7461 131.946 90.6015Z' fill='black'/></svg>");
				-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none'><path d='M144.511 111.163C129.865 140.721 93.6526 155.732 59.0012 147.995C58.3768 147.712 59.0532 140.387 59.0532 139.616C59.1053 135.786 59.1573 131.931 59.1313 128.101C59.1313 122.01 59.2353 115.841 60.484 109.853C61.0563 107.051 61.8888 104.275 63.1115 101.654C63.7098 100.394 66.0251 95.048 67.586 94.8424C78.5641 93.3259 92.56 93.4544 97.1125 81.1429C100.156 72.9181 96.6183 62.7142 90.0886 57.0853C80.5673 48.9119 70.1875 54.7978 61.7587 61.352C59.8857 62.817 58.0387 64.3077 56.1136 65.7214C52.5236 68.4201 41.5714 63.0483 38.3977 66.1326C24.766 79.3951 39.6724 111.215 36.8108 138.871C10.8222 123.218 -4.26624 93.0175 1.06675 61.6604C6.08756 32.0254 29.1105 6.45134 61.8108 0C57.3102 27.0391 73.3352 24.6744 74.9481 49.426C88.2416 48.475 98.1531 55.646 101.379 65.7728C103.46 72.3269 102.289 78.7269 98.7254 84.5356C96.9564 87.4143 94.7972 90.0617 92.638 92.6576C89.8285 96.0247 87.0969 98.3379 87.6432 103.041C88.1115 106.923 89.8024 110.624 91.7795 113.939C95.2655 119.8 101.509 127.767 108.975 128.538C124.454 130.132 128.148 114.068 144.511 111.189V111.163Z' fill='black'/><path d='M150 47.2413C139.88 48.8348 128.642 44.1056 122.112 37.9627C113.32 29.635 110.848 18.403 113.372 6.914C130.619 15.7043 142.716 28.4784 149.974 47.2413H150Z' fill='black'/><path d='M131.946 90.6015C130.723 98.8777 119.199 115.584 110.38 109.21C102.107 103.247 109.625 83.2505 116.077 77.1076C117.95 75.3342 121.384 74.8715 123.829 75.3342C126.275 75.7968 128.356 77.1076 129.787 79.0096C132.232 82.2481 132.518 86.7461 131.946 90.6015Z' fill='black'/></svg>");
				mask-repeat: no-repeat;
				-webkit-mask-repeat: no-repeat;
				mask-size: contain;
				-webkit-mask-size: contain;
			}
		}
	}
}

/* Coupon Styles */

*:has( > .cpn-itm ) {
	container-type: inline-size;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		inset: calc(-1 * var(--cpn-udr-o)) var(--cpn-udr-s);
		background: var(--cpn-udr-clr, #ffce34);
		border-radius: var(--bdr-rds, 1rem);
		z-index: 0;
	}
}
.bg-bx:has(.bg-bx) { --cpn-ntch-bg: var(--inner-theme); }
.cpn-ntch {
	position: absolute;
	top: var(--cpn-ntch-y);
	left: calc(-1 * var(--pd-h) );
	pointer-events: none;
	z-index: 2;
	width: calc(100% + (var(--pd-h) * 2));
	--bdr-stl: dashed;
	--bdr-w: 2px;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 0;
		translate: 0 -50%;
		width: calc(var(--cpn-ntch-r) * 2);
		height: calc(var(--cpn-ntch-r) * 2);
		border-radius: 50%;
		background-color: var(--cpn-ntch-bg, var(--main-bg));
	}

	&::before {
		left: calc(-1.1 * var(--cpn-ntch-r));
	}

	&::after {
		right: calc(-1.1 * var(--cpn-ntch-r));
	}
}

ul:has(.cpn-itm) {
	padding-top: var(--cpn-v1-lgo-ovlp, 5.5rem);
    padding-bottom: 1.8rem;
}

li:has(.cpn-itm) {
	flex-shrink: 0;
	position: relative;
	overflow: visible;


	/* Yellow rotated blob behind each card */
	&::before {
		content: '';
		position: absolute;
		inset: -1% 8% -2% 3%;
		background-color: var(--buttons);
		border-radius: var(--bdr-rds);
		transform: rotate(-5.5deg);
		z-index: 0;
	}

	
}

.cpn-itm {
	position: relative;
	z-index: 1;
	padding: var(--cpn-bdr-pd);

	&::after {
		content: '';
		position: absolute;
		inset: var(--cpn-bdr-pd);
		z-index: 1;
		border-width: var(--cpn-bdr-w);
		border-style: var(--cpn-bdr-s);
		border-radius: inherit;
		pointer-events: none;
	}

	 .lgo {
        margin-top: calc(var(--cpn-v1-lgo-ovlp, 5.5rem) * -1);
        position: relative;
        z-index: 2;
    }
		
	&.no-bg:after {
		inset: 0;
	}
	
	.act .icn {
		font-size: var(--cpn-act-icn-s);
	}
	
	.lgo {
		display: var(--cpn-lg-dsp);
		max-width: var(--cpn-lg-mx-wd-clc);
		margin-inline: auto;
	}
	
	.icn.ft {
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50%;
		font-size: 2rem;
	}
	
	&.no-bg {
		padding: var(--cpn-bdr-pd);
		
		&::after {
			inset: 0;
		}
	}
	
}

@media print {
	header,
	footer {
		display: none;
		visibility: hidden;
	}
}

@container (width > 900px) {
	.cpn-itm .pd_v {
		--pd-v: clamp(calc(var(--sp-vp-min) * 0.5), var(--sp-vp), calc(var(--sp-vp-max) * 0.5) );
	}
	
	.cpn-itm div.cpn-lyt {
		text-align: left;
		display: grid;
		column-gap: var(--flx-gap);
		grid-template-columns: calc(50% - var(--cpn-ttl-w)) 1fr;
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dsc'
			'act dsc'
			'act dt'
			'act dis';
			
		&:after {
			content: "";
			position: absolute;
			top: 50%;
			height: 100%;
			width: var(--bdr-w);
			left: calc( 50% - var(--cpn-ttl-w) + ( var(--flx-gap) * 0.5 ) );
			background-color: hsl(from var(--text-color) h s l / 0.5);
			transform: translateY(-50%);
		}
			
		.prc {
			grid-area: prc;
			text-align: center;
			align-self: center;
			
			&:nth-last-child(6) {
				align-self:flex-end;
			}
		}
		
		.ttl {
			grid-area: ttl;
			margin-top: 0;
		}
	
		.dsc {
			grid-area: dsc;
		}
		
		.dt {
			grid-area: dt;
		}
		
		.dis {
			grid-area: dis;
		}
			
		.act {
			grid-area: act;
			justify-content: center;
			
			
			
		}
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(3) {
		grid-template-areas:
			'prc ttl'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dsc ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dt ) {
		grid-template-areas:
			'prc ttl'
			'prc dt'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dis ) {
		grid-template-areas:
			'prc ttl'
			'prc dis'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(5):has( .dis ) {
		grid-template-areas:
			'prc ttl'
			'prc dt'
			'prc dis'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(5):has( .dsc ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dt'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(5):not( :has( .dt ) ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dis'
			'prc act';
	}
}