/* MetaAffinity Decoration Methods widget */
html body { overflow-x: clip; }

.madc {
	--madc-bg: #161618;
	--madc-card: #1F1F22;
	--madc-ink: #ffffff;
	--madc-text: rgba(255, 255, 255, .78);
	--madc-cols: 3;
	--madc-head: "Barlow Condensed", "Arial Narrow", sans-serif;
	--madc-font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
	--madc-cut: 0px;

	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--madc-bg);
	color: var(--madc-ink);
	font-family: var(--madc-font);
	clip-path: polygon(0 0, calc(100% - var(--madc-cut)) 0, 100% var(--madc-cut), 100% 100%, var(--madc-cut) 100%, 0 calc(100% - var(--madc-cut)));
}
.madc.madc--cut { --madc-cut: clamp(18px, 2.4vw, 40px); }
.madc *, .madc *::before, .madc *::after { box-sizing: border-box; }

.madc-inner {
	max-width: none;
	margin: 0;
	padding: clamp(64px, 7vw, 110px) clamp(24px, 3.2vw, 64px) clamp(64px, 7vw, 100px);
}

/* heading */
.madc-head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 52px); }
.madc .madc-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}
.madc-slashes { display: inline-flex; gap: 3px; }
.madc-slashes i { width: 4px; height: 12px; background: currentColor; transform: skewX(-24deg); display: block; }
.madc .madc-title {
	font-family: var(--madc-head);
	font-weight: 800;
	font-size: clamp(52px, 6.2vw, 108px);
	line-height: .9;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: var(--madc-ink);
	margin: 0 0 22px;
}
.madc .madc-text {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.7;
	color: var(--madc-text);
	max-width: 440px;
	margin: 0;
}

/* grid */
.madc .madc-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--madc-cols), minmax(0, 1fr));
	gap: 12px;
}
.madc .madc-card { margin: 0; padding: 0; }
.madc-card-in {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--madc-card);
	color: inherit;
	text-decoration: none;
	transition: background-color .3s ease;
}
.madc--cut .madc-card-in { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
a.madc-card-in:hover { color: inherit; background: #26262a; }
.madc-img { aspect-ratio: 4 / 3; overflow: hidden; background: #2a2a2e; }
.madc .madc-img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.madc-card:hover .madc-img img { transform: scale(1.05); }
.madc-body { padding: 22px 24px 26px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.madc .madc-name {
	font-family: var(--madc-head);
	font-weight: 800;
	font-size: clamp(22px, 1.9vw, 28px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--madc-ink);
	margin: 0 0 10px;
}
.madc .madc-desc { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .88); margin: 0 0 16px; }
.madc .madc-best {
	margin-top: auto;
	display: inline-block;
	padding: 6px 16px;
	font-size: 12.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, .92);
	background: rgba(255, 255, 255, .12);
	clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

/* button */
.madc .madc-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding: 13px 30px 13px 24px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-family: var(--madc-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
	transition: background-color .25s ease;
}
.madc .madc-btn svg { width: 14px; height: 14px; transition: transform .25s ease; }
.madc .madc-btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.madc .madc-btn:hover svg { transform: translateX(4px); }

@media (max-width: 1024px) {
	.madc { --madc-cols: 2; }
}
@media (max-width: 640px) {
	.madc { --madc-cols: 1; }
	.madc-body { padding: 18px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.madc .madc-img img { transition: none; }
}