/* @generated by Skylit - do not edit */
/**
 * Skylit dev cache — pattern: olt-card-grid
 * Auto-generated on save_post. Do not hand-edit.
 */

.olt-card-grid {
		display: grid;
		gap: 1px;
		margin-top: 58px;
		background: var(--olt-color-line);
		}.olt-card-grid--2col {
		/* skylit-class-mod: Two-column card grid | only: .olt-card-grid */
		}.olt-card-grid--2col .olt-card {
		min-height: 480px;
		}

@media (min-width: 1025px) {
		.olt-card-grid {
		grid-template-columns: repeat(3, 1fr);
		}.olt-card-grid--2col {
		grid-template-columns: repeat(2, 1fr);
		}.olt-card-grid--2col .olt-card {
		min-height: 520px;
		}
		}

.olt-card {
		position: relative;
		display: grid;
		align-items: end;
		min-height: 390px;
		padding: clamp(26px, 4vw, 54px);
		overflow: hidden;
		background: var(--olt-color-ink);
		color: #fff;
		isolation: isolate;
		}.olt-card .olt-card-image {
		position: absolute;
		inset: 0;
		z-index: -2;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center right;
		opacity: 0.9;
		--olt-image-shift-x: 0px;
		--olt-image-shift-y: 0px;
		transform: translate3d(var(--olt-image-shift-x), var(--olt-image-shift-y), 0) scale(1);
		transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 520ms ease;
		will-change: transform;
		}.olt-card::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
		linear-gradient(90deg, rgb(17 16 14 / 76%) 0%, rgb(17 16 14 / 62%) 28%, rgb(17 16 14 / 34%) 56%, rgba(17, 16, 14, 0.14) 78%, #17161400 100%),
		linear-gradient(90deg, #17161400 0%, rgba(127, 139, 93, 0.18) 42%, rgba(255, 255, 255, 0.08) 54%, #17161400 72%);
		background-size: 100% 100%, 180% 100%;
		background-position: 0% center, 0% center;
		background-repeat: no-repeat;
		opacity: 1;
		transition: background-position 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 620ms ease;
		will-change: background-position, opacity;
		}.olt-card .olt-card-copy {
		position: relative;
		z-index: 1;
		display: grid;
		gap: 0;
		width: min(70%, 560px);
		}.olt-card .olt-card-copy h3 {
		order: 2;
		margin: 0;
		font-family: var(--olt-font-display);
		font-size: var(--olt-type-card-title);
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.18;
		}.olt-card .olt-card-copy p {
		order: 3;
		margin: 0;
		font-size: var(--olt-type-body);
		line-height: 1.75;
		color: rgba(255, 255, 255, 0.76);
		}.olt-card .olt-card-copy .olt-number {
		color: rgba(255, 255, 255, 0.68);
		font-size: var(--olt-type-label);
		letter-spacing: 0.18em;
		text-transform: uppercase;
		}.olt-card .olt-reveal-number, .olt-card .olt-reveal-copy {
		max-height: 0;
		margin-block-start: 0;
		overflow: hidden;
		opacity: 0;
		transform: translateY(18px);
		transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1), margin-block-start 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: max-height, margin-block-start, opacity, transform;
		}.olt-card .olt-reveal-number {
		order: 1;
		transition-duration: 240ms, 240ms, 180ms, 240ms;
		}.olt-card:hover .olt-reveal-number, .olt-card:focus-within .olt-reveal-number {
		max-height: 2em;
		margin-block-start: 16px;
		opacity: 1;
		transform: translateY(0);
		}.olt-card:hover .olt-reveal-copy, .olt-card:focus-within .olt-reveal-copy {
		max-height: 10em;
		margin-block-start: 18px;
		opacity: 1;
		transform: translateY(0);
		transition-delay: 90ms, 90ms, 90ms, 90ms;
		}

@media (min-width: 1025px) {
		.olt-card:hover .olt-card-image,
		.olt-card:focus-within .olt-card-image {
		opacity: 1;
		transform: translate3d(var(--olt-image-shift-x), var(--olt-image-shift-y), 0) scale(1.035);
		}.olt-card:hover::before, .olt-card:focus-within::before {
		background-position: left center, right center;
		opacity: 1;
		}
		}

@media (max-width: 1024px) {
		.olt-card {
		min-height: 340px;
		}.olt-card .olt-card-copy {
		width: 100%;
		}.olt-card.olt-reveal-active .olt-card-image {
		opacity: 1;
		transform: translate3d(var(--olt-image-shift-x, 0px), var(--olt-image-shift-y, 0px), 0) scale(1.035);
		}.olt-card.olt-reveal-active::before {
		background-position: left center, right center;
		opacity: 1;
		}
		}