.features-metrics {
  {#background-color: red;#}
	position: relative;
	}

{#
.bg-container {
  width: 100%;
  padding: 50px;
  flex-wrap: wrap;
  background-image: url(../svg/1122-figures_module-bg-1.svg);
  background-position: center;
  background-repeat: no-repeat;
	}
 #}

.bg-container {
  {#background-color: blue;#}
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

.features-header h2{
  text-align: center;
  padding-bottom: 20px;
}

.features-header a{
  font: 400 2.2rem 'Nunito Sans', sans-serif;
  color: #7357ff;
  text-decoration: underline;
  padding-bottom: 20px;
}

.features-header a{
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.features-wrapper {
  {#background-color: #fff;#}
  border-radius: 20px;
  grid-column-gap: 16px;
  grid-row-gap: 40px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  display: grid;
  padding: 50px;
}

.features-block {
  {#background-color: gold;#}
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.features-block img {
 	width: 100%;
}

{#
.features-wrapper {
  background-color: #7457ff;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-start;
	display: flex;
	}

.features-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  display: flex;
}

.features-block {
	width: 320px;
	text-align: center;
	flex-direction: column;
	align-items: center;
	display: flex;
}
#}


.features-title {
	font-family: 'Rubik',sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  font-size: 7rem;
  color: #242335;
  padding-bottom: 20px;
	}

.features-description {
  font: 500 2.2rem 'Rubik',sans-serif;
  color: #242335;
  text-align: center;

  }

@media screen and (max-width: 991px) {
	.bg-container {
			max-width: 728px;
		}

	.features-wrapper {
		justify-content: space-between;
		}
	}

	@media screen and (max-width: 767px) {
		.features-metrics {
			padding: 60px 15px;
		}
		
		.features-wrapper {
			flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 40px;
      display: flex;
      
		}

		.features-block {
			width: 50%;
      margin-bottom: 40px;
		}

	}	
	
@media screen and (max-width: 479px) {
		.container {
			max-width: none;
		}

	.features-wrapper {
		  flex-direction: column;
      align-content: center;
			justify-content: center;
			justify-items: center;
      display: flex;

		}

	}