@charset "UTF-8";
.card-ex {
		container-type: inline-size;
		container-name: card-ex;
		display: flex;
		min-height: 280px;
		padding: 0;
		color: var(--accent);
}
.style-novodev .card-ex {
		min-height: 260px;
}
.card-ex .wrap, .card-ex .image {
		flex: 0 0 auto;
}
.card-ex .wrap {
		padding: var(--side-block);
		gap: 16px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		order: 1;
		flex: 1 1 auto;
}
.card-ex .image {
		order: 2;
		width: 212px;
		height: 212px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		margin-right: 20px;
}
.card-ex .image img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		flex: 0 0 auto;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
}
.style-izhevsk .card-ex .image {
		width: min(41.34%, 400px);
		align-self: stretch;
		margin-right: 0;
		height: auto;
		border-radius: 0;
		mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 25%);
}
.style-izhevsk .card-ex .image img {
		border-radius: 0 var(--radius) var(--radius) 0;
}
.style-novodev .card-ex .image {
		width: calc(100% - 440px);
		min-width: 33%;
		align-self: stretch;
		margin-right: 0;
		height: auto;
		border-radius: 0 var(--radius) var(--radius) 0;
}
.style-novodev .card-ex .image img {
		border-radius: 0 var(--radius) var(--radius) 0;
}
.card-ex .title {
		font-size: 24px;
		font-weight: bold;
		color: var(--accent);
}
.card-ex .text {
		margin-top: -8px;
}
.style-novodev .card-ex .btn {
		margin-top: auto;
}
@container card-ex (min-width: 700px) {
		.card-ex .title {
				font-size: 36px;
		}
		.style-izhevsk .card-ex .title {
				font-size: 32px;
		}
		.style-novodev .card-ex .title {
				font-size: 24px;
		}
}
@container card-ex (max-width: 500px) {
		.card-ex .image {
				position: absolute;
				top: var(--side-block);
				left: 50%;
				transform: translate3d(-50%, 0, 0);
		}
		.style-izhevsk .card-ex .image {
				width: 100%;
				height: 330px;
				mask-image: none;
				top: 0;
		}
		.style-novodev .card-ex .image {
				width: 100%;
				height: 270px;
				mask-image: none;
				top: 0;
		}
		.style-izhevsk .card-ex .image img, .style-novodev .card-ex .image img {
				border-radius: var(--radius) var(--radius) 0 0;
		}
		.card-ex .wrap {
				width: 100%;
				flex: 0 0 auto;
				margin-top: 270px;
		}
		.style-izhevsk .card-ex .wrap {
				margin-top: 330px;
		}
}