sidebar {
	margin-top: var(--o-2);
	display: block;
	padding: var(--o-2) var(--o);
	background: var(--k-szary);
}

.mod_h {
	font-weight: var(--font-bold);
	font-size: 120%;
	position: relative;
	color: var(--k-zielony-ciemny);
	display: inline-block;
}
.mod_h::after {
	content: "";
	display: block;
	width: 50%;
	height: 4px;
	background: var(--k-zielony);
	border-radius: 4px;
	margin-top: var(--o-pol);
}

.mf_a {
	text-decoration: unset;
	text-align: center;
	width: 269px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: var(--o-2) auto;
}
.mf_f {
	border-radius: var(--radius-procent);
	border: var(--o-cwierc) solid var(--k-brazowy);
	overflow: hidden;
	width: 150px;
	margin: 0 auto var(--o);
}

.mf_h {
	border-radius: 10px;
	border: var(--o-cwierc) solid var(--k-brazowy);
	padding: var(--o);
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--k-bialy);
	color: var(--k-tekstu);
	position: relative;
	font-weight: var(--font-bold);
}
.mf_h span {
	display: block;
	font-weight: normal;
	font-size: var(--font-small);
}
.mf_h::before {
	content: '';
	display: block;
	width: var(--o-cwierc);
	height: var(--o);
	background: var(--k-brazowy);
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translate(-2px);
}


.mod_a {
	display: flex;
	margin: var(--o-2) auto 0;
	gap: var(--o);
	background: var(--k-zielony);
	color: var(--k-bialy);
	text-decoration: unset;
	justify-content: center;
	align-items: center;
	height: var(--o-2);
	width: 200px;
	border-radius: var(--radius20);
}
.mod_a:hover {
	background: var(--k-brazowy);
	color: var(--k-bialy);
}






.l_a {
	width: 375px;
	text-decoration: unset;
	text-align: center;
	border: var(--o-cwierc) solid var(--k-brazowy);
	color: inherit;
	padding: var(--o);
	border-radius: var(--radius20);
	position: relative;
	padding-top: 70px;
}


.l_foto {
	background: var(--k-bialy);
	border: var(--o-cwierc) solid var(--k-brazowy);
	padding: 15px;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	vertical-align: middle;
	position: absolute;
	top: -50px;
	left: 50%;
	translate: -50px;
}

.l_h {
	margin-bottom: var(--o);
}



@media (min-width: 600px) {
.mod_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--o);
}
.mf_a {
	margin: var(--o-2) 0 0;
}


}