.kf-card-with-media {
	border-radius: 20px;
	overflow: hidden;
	background: #ffffff;
    
    box-shadow: 0px 24px 40px 0px #0A0B5A14;
}

.kf-card-with-media--style-1 {
	border-radius: 0px;
	box-shadow: none;
	overflow: visible;
	/* overflow-x: clip; */
	position: relative;
}

.kf-card-with-media--style-1::after {
	content: url('data:image/svg+xml,<svg width="747" height="816" viewBox="0 0 747 816" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.7" filter="url(%23filter0_f_491_373)"><path d="M534.826 200.748C647.673 -102.694 670.588 394.937 608.731 502.078C546.873 609.218 616.506 189.123 310.819 588.739C5.13289 988.354 111.484 291.98 173.342 184.839C235.2 77.6988 421.979 504.19 534.826 200.748Z" fill="url(%23paint0_radial_491_373)"/></g><defs><filter id="filter0_f_491_373" x="0" y="0" width="746.336" height="815.292" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="52" result="effect1_foregroundBlur_491_373"/></filter><radialGradient id="paint0_radial_491_373" cx="0" cy="0" r="1" gradientTransform="matrix(6.12994 -324.669 313.428 1.4462 458.187 427.109)" gradientUnits="userSpaceOnUse"><stop stop-color="%2395FFEC"/><stop offset="0.262019" stop-color="%23BCF1F0"/><stop offset="0.524038" stop-color="%23D4D5FF"/><stop offset="0.817308" stop-color="%23EDEDFF" stop-opacity="0"/></radialGradient></defs></svg>');
	position: absolute;
	z-index: 1;
	pointer-events: none;
    bottom: -15%;
    right: 57%;
    transform: translate(50%, 50%);
}

@media (max-width: 1000px) {
	.kf-card-with-media--style-1::after {
		display: none;
	}
}

.kf-card-with-media--style-2,
.kf-card-with-media--style-3,
.kf-card-with-media--style-4 {
	background: #1A1825;
	color: #ffffff;
}

.kf-card-with-media__inner {
	display: flex;
	width: 100%;
	min-width: 0;
}

.kf-card-with-media__content,
.kf-card-with-media__media {
	min-width: 0;
}

.kf-card-with-media__content {
    --padding-y: 20px;
	box-sizing: border-box;
	padding: var(--padding-y) 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;

    min-height: calc(400 - var(--padding-y) * 2);
    position: relative;
}

.kf-card-with-media--style-4 .kf-card-with-media__content {
	padding-top: 80px;
	max-width: 520px;
}

.kf-card-with-media--style-4 .kf-card-with-media__content {
	position: relative;
	z-index: 4;
	padding-bottom: 50px;
}

.kf-card-with-media--style-1 .kf-card-with-media__content,
.kf-card-with-media--style-1 .kf-card-with-media__media {
	border-radius: 20px;
	overflow: hidden;
}

.kf-card-with-media--style-1 .kf-card-with-media__media {
	position: relative;
	z-index: 2;
}

.kf-card-with-media--style-4 .kf-card-with-media__media {
	position: absolute;
    inset: 0;
	pointer-events: none;
	border-radius: 20px;
}

.kf-card-with-media--style-1 .kf-card-with-media__content {
	background: linear-gradient(108.65deg, rgba(95, 97, 255, 0.15) 1.19%, rgba(95, 97, 255, 0.03) 71.11%, rgba(95, 97, 255, 0.09) 100%);
    box-shadow: 0px 16px 26px 0px #1A182514;
}

.kf-card-with-media--style-1 .kf-card-with-media__content::after {
  content: '';
  position: absolute;
  z-index: 10;
  inset: -1px;
  border-radius: inherit;
  /* this is the border width */
  padding: 2px;
  background: linear-gradient(222.79deg, #FFFFFF 1.1%, rgba(255, 255, 255, 0) 75.97%),
linear-gradient(222.79deg, #FFFFFF 1.1%, rgba(255, 255, 255, 0) 75.97%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.kf-card-with-media--style-2 .kf-card-with-media__content,
.kf-card-with-media--style-3 .kf-card-with-media__content {
    background: radial-gradient(ellipse 31% 28% at 54% 50%, rgba(95, 97, 255, 0.95) 0%, rgba(95, 97, 255, 0.7) 35%, rgba(95, 97, 255, 0.3) 65%, rgba(95, 97, 255, 0) 100%);
    background-position: 12% 23%;
    background-size: 275% 275%;
}

.kf-card-with-media__content > * {
	margin: 0;
    position: relative;
    z-index: 1;
}

.kf-card-with-media__content > * + * {
	/* margin-top: 16px; */
}

.kf-card-with-media__media {
	overflow: hidden;
    position: relative;

    height: 328px;
}

.kf-card-with-media__media-link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.kf-card-with-media__media-link::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="%235F61FF"/><path d="M50 0C40.111 0 30.444 2.93245 22.2215 8.42652C13.9991 13.9206 7.59043 21.7295 3.80605 30.8658C0.0216642 40.0021 -0.968502 50.0555 0.960758 59.7545C2.89002 69.4536 7.65206 78.3627 14.6447 85.3553C21.6373 92.3479 30.5465 97.11 40.2455 99.0393C49.9445 100.969 59.9979 99.9783 69.1342 96.194C78.2705 92.4096 86.0794 86.001 91.5735 77.7785C97.0676 69.556 100 59.8891 100 50C100 43.4339 98.7067 36.9321 96.194 30.8658C93.6812 24.7995 89.9983 19.2876 85.3553 14.6447C80.7124 10.0017 75.2005 6.31876 69.1342 3.80602C63.0679 1.29329 56.5661 0 50 0ZM40 72.5V27.5L70 50L40 72.5Z" fill="white"/></svg>') no-repeat center / contain;
    width: clamp(50px, 37.57px + 3.31vw, 80px);
    aspect-ratio: 1;
    background-size: 100%;
}

.kf-card-with-media--style-4 .kf-card-with-media__media-link::after { 
	display: none;
}
.kf-card-with-media--style-4 .kf-card-with-media__media-link::before {
    content: url('data:image/svg+xml,<svg width="932" height="1000" viewBox="0 0 932 500" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(%23filter0_f_491_418)"><ellipse cx="198" cy="330.999" rx="492" ry="393" transform="rotate(-18.4462 198 330.999)" fill="%231A1825"/></g><defs><filter id="filter0_f_491_418" x="-535.123" y="-323.112" width="1466.25" height="1308.22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="125" result="effect1_foregroundBlur_491_418"/></filter></defs></svg>');
	position: absolute;
	z-index: 1;
	pointer-events: none;
    bottom: 50%;
    right: 57%;
    transform: translate(50%, 50%);
}


.kf-card-with-media__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    transition: transform 0.3s ease;
}

.kf-card-with-media__media-link:hover .kf-card-with-media__image {
    transform: scale(1.1);
}

.kf-card-with-media--style-1 .kf-card-with-media__inner {
	gap: 20px 40px;
}

.kf-card-with-media--style-1 .kf-card-with-media__inner,
.kf-card-with-media--style-2 .kf-card-with-media__inner {
	flex-direction: column-reverse;
}

.kf-card-with-media--style-3 .kf-card-with-media__inner {
	flex-direction: column-reverse;
}

.kf-card-with-media--style-1 .kf-card-with-media__content,
.kf-card-with-media--style-2 .kf-card-with-media__content,
.kf-card-with-media--style-3 .kf-card-with-media__content {
	width: 100%;
}

.kf-card-with-media--style-1 .kf-card-with-media__media,
.kf-card-with-media--style-2 .kf-card-with-media__media,
.kf-card-with-media--style-3 .kf-card-with-media__media {
	width: 100%;
}

.kf-card-with-media--style-3 .kf-card-with-media__media {
    min-height: 400px;
}

.kf-card-with-media.no-media .kf-card-with-media__content {
	flex: 1 1 100%;
}

.kf-card-with-media__content-button-wrap {
	display: flex;
	gap: 15px;
}

.kf-card-with-media__content-button-wrap a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	margin: 0;

	font-size: 16px;
	line-height: 100%;

	gap: 10px;

	padding: 18px 24px;
    border-radius: 50vw;
    text-decoration: none;

	--c-light: #ffffff8c;
	--c-dark: #ffffff24;

	--glass-reflex-dark: 1;
	--glass-reflex-light: 1;
	
	--saturation: 150%;

	background-color: #ffffff08;
	backdrop-filter: blur(8px) saturate(var(--saturation));
	-webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
	box-shadow: inset 0 0 0 1px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0px -2px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
	transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);
}

.kf-card-with-media__content-button-wrap a:hover,
.kf-card-with-media__content-button-wrap a:active {
	--c-light: #ffffffa5;
	--c-dark: #ffffff3d;
	background-color: #ffffff35;
}

.kf-card-with-media__content-button-wrap .kf-card-with-media__media-button-link {
	padding: 0;
	width: 52px;
	aspect-ratio: 1;

	display: flex;
	justify-content: center;
	align-items: center;
}

@media (min-width: 768px) {
	.kf-card-with-media--style-1.has-media .kf-card-with-media__inner,
	.kf-card-with-media--style-2.has-media .kf-card-with-media__inner {
		flex-direction: row;
		align-items: stretch;
	}

	.kf-card-with-media--style-1.has-media .kf-card-with-media__content,
	.kf-card-with-media--style-1.has-media .kf-card-with-media__media {
		flex: 1 1 50%;
		width: 50%;
	}

	.kf-card-with-media--style-2.has-media .kf-card-with-media__content,
	.kf-card-with-media--style-2.has-media .kf-card-with-media__media {
		flex: 0 0 50%;
		width: 50%;
	}

	.kf-card-with-media--style-2.has-media .kf-card-with-media__content {
		flex: 0 0 66.66%;
		width: 66.66%;
	}

	.kf-card-with-media--style-2.has-media .kf-card-with-media__media {
		flex: 0 0 33.33%;
		width: 33.33%;
	}

	.kf-card-with-media--style-1.no-media .kf-card-with-media__inner,
	.kf-card-with-media--style-2.no-media .kf-card-with-media__inner,
	.kf-card-with-media--style-3 .kf-card-with-media__inner {
		flex-direction: column;
	}

    .kf-card-with-media--style-3 .kf-card-with-media__inner {
        flex-direction: column-reverse;
    }

	.kf-card-with-media--style-3 .kf-card-with-media__content,
	.kf-card-with-media--style-3 .kf-card-with-media__media {
		flex: 0 0 100%;
		width: 100%;
	}

    .kf-card-with-media__media {
        height: auto;
    }

    .kf-card-with-media__content {
        padding: var(--padding-y) 50px;
    }

    .kf-card-with-media--style-2 .kf-card-with-media__content,
    .kf-card-with-media--style-3 .kf-card-with-media__content {
        --padding-y: 35px;
        padding: var(--padding-y) 40px;
    }
}