.zm-sgid-grid{
	--zm-sgid-columns:4;
	display:grid;
	grid-template-columns:repeat(var(--zm-sgid-columns), minmax(0, 1fr));
	column-gap:24px;
	row-gap:24px;
	width:100%;
}
.zm-sgid-grid *,
.zm-sgid-grid *::before,
.zm-sgid-grid *::after{
	box-sizing:border-box;
}
.zm-sgid-card{
	--zm-sgid-overlay-opacity:.64;
	--zm-sgid-hover-overlay-opacity:.82;
	position:relative;
	height:570px;
	overflow:hidden;
	background:#1f2933;
	border-radius:5px;
	isolation:isolate;
	transform:translateZ(0);
}
.zm-sgid-bg{
	position:absolute;
	inset:0;
	z-index:1;
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	max-height:none;
	object-fit:cover;
	object-position:center center;
}
.zm-sgid-overlay{
	position:absolute;
	inset:0;
	z-index:2;
	background-color:#111c26;
	opacity:var(--zm-sgid-overlay-opacity);
	pointer-events:none;
	transition:opacity .65s ease, background-color .65s ease;
}
.zm-sgid-overlay::before,
.zm-sgid-overlay::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
}
.zm-sgid-overlay::before{
	background:radial-gradient(circle at 0 0, rgba(0,0,0,.42) 0%, rgba(0,0,0,.24) 34%, rgba(0,0,0,0) 64%);
}
.zm-sgid-overlay::after{
	background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 36%, rgba(0,0,0,0) 70%);
}
.zm-sgid-content{
	position:relative;
	z-index:3;
	height:100%;
	padding:82px 70px 58px;
	display:grid;
	grid-template-rows:auto minmax(24px, 1fr) auto;
	gap:24px;
	overflow:hidden;
}
.zm-sgid-front{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:12px;
	min-width:0;
}
.zm-sgid-number{
	display:block;
	color:rgba(255,255,255,.62);
	font-size:17px;
	line-height:1;
	font-weight:800;
	letter-spacing:0;
}
.zm-sgid-title{
	margin:0;
	color:#fff;
	font-size:32px;
	line-height:1.1;
	font-weight:800;
	letter-spacing:0;
	overflow-wrap:anywhere;
}
.zm-sgid-title a{
	color:inherit;
	text-decoration:none;
}
.zm-sgid-bottom{
	display:grid;
	grid-template-areas:"stack";
	align-items:end;
	justify-items:start;
	min-width:0;
	max-width:100%;
}
.zm-sgid-icon,
.zm-sgid-reveal{
	grid-area:stack;
}
.zm-sgid-icon{
	position:relative;
	z-index:1;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:66px;
	line-height:1;
	opacity:1;
	transform:translateY(0);
	transition:opacity .65s ease, transform .65s ease;
}
.zm-sgid-icon svg,
.zm-sgid-icon img{
	display:block;
	width:66px;
	height:66px;
	object-fit:contain;
}
.zm-sgid-icon svg{
	fill:currentColor;
}
.zm-sgid-reveal{
	position:relative;
	z-index:2;
	width:100%;
	max-width:100%;
	opacity:0;
	visibility:hidden;
	transform:translateY(42px);
	pointer-events:none;
	transition:opacity .65s ease, visibility .65s ease, transform .65s ease;
}
.zm-sgid-description{
	max-width:250px;
	color:rgba(255,255,255,.76);
	font-size:17px;
	line-height:1.55;
	font-weight:700;
	overflow-wrap:anywhere;
}
.zm-sgid-button{
	position:relative;
	display:inline-flex;
	align-items:center;
	margin-top:26px;
	color:#fff;
	font-size:14px;
	line-height:1.2;
	font-weight:900;
	text-transform:uppercase;
	text-decoration:none;
	letter-spacing:0;
	max-width:100%;
	overflow-wrap:anywhere;
}
.zm-sgid-button::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:-5px;
	height:2px;
	background:currentColor;
	transform:scaleX(1);
	transform-origin:left center;
	transition:transform .28s ease;
}
.zm-sgid-card:hover .zm-sgid-overlay,
.zm-sgid-card:focus-within .zm-sgid-overlay{
	opacity:var(--zm-sgid-hover-overlay-opacity);
}
.zm-sgid-card:hover .zm-sgid-icon,
.zm-sgid-card:focus-within .zm-sgid-icon{
	opacity:0;
	transform:translateY(34px);
	pointer-events:none;
}
.zm-sgid-card:hover .zm-sgid-reveal,
.zm-sgid-card:focus-within .zm-sgid-reveal{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
	pointer-events:auto;
}
.zm-sgid-button:hover::after,
.zm-sgid-button:focus::after{
	transform:scaleX(.72);
}
@media (max-width:1024px){
	.zm-sgid-grid{
		--zm-sgid-columns:2;
	}
	.zm-sgid-card{
		height:480px;
	}
	.zm-sgid-content{
		padding:58px 42px 46px;
	}
}
@media (max-width:767px){
	.zm-sgid-grid{
		--zm-sgid-columns:1;
	}
	.zm-sgid-card{
		height:520px;
	}
	.zm-sgid-content{
		padding:50px 30px 42px;
	}
	.zm-sgid-title{
		font-size:30px;
	}
}
@media (hover:none), (pointer:coarse){
	.zm-sgid-card .zm-sgid-overlay{
		opacity:var(--zm-sgid-hover-overlay-opacity);
	}
	.zm-sgid-card .zm-sgid-icon{
		opacity:0;
		transform:translateY(34px);
		pointer-events:none;
	}
	.zm-sgid-card .zm-sgid-reveal{
		opacity:1;
		visibility:visible;
		transform:translateY(0);
		pointer-events:auto;
	}
}
