/* Priority: 61 */

/* Figma node 6031:5624. */
.gf-service-card,
.gf-service-card.xleb-post,
.gf-service-card.article-item {
	padding: 24px 20px 20px;
	overflow: hidden;
	border-radius: var(--roundedM, 16px);
	aspect-ratio: 107 / 143;
	box-sizing: border-box;
	background: var(--primaryLightBg, #f9f5f2);
	color: var(--contentOnDark, #fff);
	text-decoration: none;
}

.gf-service-card::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.4) 0%,
		rgba(0, 0, 0, 0.32) 21.635%,
		rgba(0, 0, 0, 0) 100%
	);
}

.gf-service-card:hover,
.gf-service-card:focus-visible {
	color: var(--contentOnDark, #fff);
	text-decoration: none;
}

.gf-service-card:focus-visible {
	outline: 2px solid var(--primary500, #ff6033);
	outline-offset: 4px;
}

.gf-service-card__media,
.gf-service-card__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.gf-service-card__media {
	z-index: 0;
}

.gf-service-card__image {
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s ease;
}

.gf-service-card__title {
	position: relative;
	z-index: 2;
	width: 100%;
	color: var(--contentOnDark, #fff);
}

.gf-service-card__title p {
	max-width: none;
	margin: 0;
	color: inherit;
}

.gf-service-card__arrow {
	position: absolute;
	z-index: 2;
	right: 20px;
	bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--whiteOpacity800, rgba(255, 255, 255, 0.78));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--contentColor, #1a0a0a);
	line-height: 1;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.gf-service-card__arrow i::before{
	font-size: 26px;
	color: var(--primary500);
}

.gf-service-card:hover .gf-service-card__image,
.gf-service-card:focus-visible .gf-service-card__image {
	transform: scale(1.025);
}

.gf-service-card:hover .gf-service-card__arrow,
.gf-service-card:focus-visible .gf-service-card__arrow {
	opacity: 1;
	transform: translateX(0);
}

@media (hover: none), (max-width: 767px) {
	.gf-service-card__arrow {
		opacity: 1;
		transform: none;
	}
}

/* Keep services discoverable before their photos are supplied. */
.gf-service-card--text::before { display: none; }
.gf-service-card--text .gf-service-card__title { color: var(--contentDefaultColor, #282828); }