.mk-brand *,
.mk-brand *::before,
.mk-brand *::after {
	box-sizing: border-box;
}

/* Desktop: logo spans both rows, main and extra stack on the right */
.mk-brand {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-areas:
		'logo main'
		'logo extra';
	column-gap: 60px;
	row-gap: 0;
	padding: 48px 24px;
	/* max-width: var(--mk-max-width, 1600px); */
	max-width: 1376px;
	margin: 0 auto;
	font-family: 'Nunito Sans', 'Open Sans', sans-serif;
	color: var(--mk-fg-secondary, #5b5b49);
}

.mk-brand__logo {
	grid-area: logo;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	align-self: center;
}

.mk-brand__figures {
	width: 100%;
	height: auto;
}

.mk-brand__name {
	display: block;
	width: 100%;
	height: auto;
}


.mk-brand__main {
	grid-area: main;
	align-self: end;
}

.mk-brand__main p{
	margin-bottom: 26px;
}

.mk-brand__extra {
	grid-area: extra;
	align-self: start;
	padding-top: 14px;
}

.mk-brand__extra p{
	margin-bottom: 24px;
	font-size: 22px;
}

.mk-brand__title {
	margin: 0 0 24px;
	font-family: 'Nunito', 'Nunito Sans', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--mk-fg-secondary, #5b5b49);
}

.mk-brand__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}

.mk-brand__sub {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.mk-brand__features {
	list-style: none;
	padding: 0;
	margin: 4px 0 0;
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.mk-brand__feature {
	flex: 1 1 0;
	padding: 16px 20px 16px 40px;
	font-size: 13px;
	line-height: 1.55;
	position: relative;
	background: #fff;
}

.mk-brand__feature::before {
	content: '•';
	position: absolute;
	left: 20px;
	top: 20px;
	font-weight: 700;
}

.mk-brand__feature-title {
	display: block;
	font-weight: 700;
	margin-bottom: 3px;
}

/* Tablet: logo + h2/desc side by side, sub + features full width below */
@media (min-width: 576px) and (max-width: 991px) {
	.mk-brand {
		grid-template-columns: 2fr 3fr;
		grid-template-areas:
			'logo main'
			'extra extra';
		column-gap: 32px;
		row-gap: 24px;
		padding: 40px 24px;
	}

	.mk-brand__logo {
		align-self: center;
	}

	.mk-brand__extra {
		padding-top: 0;
	}

	.mk-brand__title {
		font-size: 18px;
	}

}

/* Mobile: everything stacked */
@media (max-width: 575px) {
	.mk-brand {
		grid-template-columns: 1fr;
		grid-template-areas:
			'logo'
			'main'
			'extra';
		row-gap: 16px;
		padding: 32px 16px;
	}

	.mk-brand__logo {
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}

	.mk-brand__figures {
		width: 100%;
		flex-shrink: 0;
	}

	.mk-brand__features {
		flex-direction: column;
		gap: 25px; 
	}
}