%placeholder @extend vs mixin

.boxes {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 10px;
	text-align: center;

	@include screen('tablet') {
		padding: 2.875rem 1.75rem 0;
	}

	@include screen('desktop') {
		flex-direction: row;
		justify-content: space-between;
		padding: 2.875rem 4.375rem 0;
	}

	.box {
		flex-basis: 100%;
		background-color: $bg_color-primary;
		margin-bottom: 1.188rem;

		@include screen('tablet') {
			padding: 2.5rem 1.875rem;
		}

		@include screen('desktop') {
			flex-basis: 33.33%;
			margin-right: 1.188rem;
		}

		&:last-child {
			margin-right: 0; 
		}

		h2 {
			font-size: 1.25rem;
			font-weight: 400;
			color: $font_color-headline;
			line-height: 28px;
		}

		.box--par {
			font-size: .9375rem;
			color: $font_color-box--p;
			line-height: 25px;
		}
	}
	.box--1 {
		.icon {
			padding-top: .875rem;
			.fa-wordpress {
				width: 42px;
				height: 42px;
				color: $icon_color;

			}
		}
	}
}

$tablet: '768px';
$laptop: '1280px';
$dektop: '1920px';

/* Glowny kontener - nazwy maja cos znaczyc /
.box-container {
display: flex;
flex-direction: column;
width: 100%;
/ Jak decydujesz na użycie jednostek rem przy definicji paddingow/marginow itp to trzymaj sie tego /
padding: 1rem;
text-align: center;
/ Powinnas użyc Media Query nie Mixiny */
@media (min-width: $tablet) {
padding: 2rem;
}
@media (min-width: $laptop) {
padding: 3rem;
}
@media (min-width: $dektop) {
padding: 4rem;
}
}

.box {
flex-basis: 100%;
/* Jak dobierasz nazwy zmiennych to trzymaj się jakiejś konwencji */
background-color: $bg_color-primary;
margin-bottom: 1.188rem;
@media (min-width: $tablet) {
padding: 2.5rem 1.875rem;
}
@media (min-width: $dektop) {
flex-basis: 33.33%;
margin-right: 1.188rem;
}

&:last-child {
margin-right: 0;
}

h2 {
font-size: 1.25rem;
font-weight: 400;
color: $font_color-headline;
line-height: 28px;
}
/* Naucz sie takiego 'zagniezdzania' w SASS jest to tozsame z .box__par /
/ Poczytaj wiecej o BEM. element__dziecko /
&__par {
font-size: .9375rem;
color: $font_color-box--p;
line-height: 25px;
}
/ Poczytaj wiecej o BEM. element__modyfikator */
&--1 {
.icon {
padding-top: .875rem;
.fa-wordpress {
width: 42px;
height: 42px;
color: $icon_color;

  }
}

}
}