.el-itens-destaque{
	padding: 45px 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	@include tablet {
		padding: 90px 0;
	}
	@include mq-min(1920) {
		padding: valor-fluido(90, 1920) 0;
	}
	.introducao{
		.v1, .v2, .v3{
			margin-bottom: 20px;
			@include mq-min(1920) {
				margin-bottom: valor-fluido(20, 1920);
			}
		}
		.texto-editavel{
			margin-bottom: 20px;
			@include mq-min(1920) {
				margin-bottom: valor-fluido(20, 1920);
			}
		}
	}
	.itens{
		@include desktop {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.img{
			background: rgba(0, 0, 0, 0.05);
			margin-bottom: 20px;
			@include mq-min(1920) {
				margin-bottom: valor-fluido(20, 1920);
			}
			img{
				display: block;
				margin: 0 auto;
				max-width: 100%;
				height: auto;
			}
		}
		.lista{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			margin: 0 auto;
			width: 100%;
			@include mq-max($desktop) {
				width: 100% !important;
			}
			li{
				display: flex;
				justify-content: center;
				align-items: center;
				//flex-grow: 1;
				flex-wrap: wrap;
				width: 100%;
				margin-bottom: 20px;
				@include mq-min(1920) {
					margin-bottom: valor-fluido(20, 1920);
				}
				.icone{
					flex-shrink: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50px;
					height: 50px;
					border-radius: 50%;
					margin-bottom: 20px;
					font-size: 25px;
					font-weight: bold;
					text-align: center;
					color: #ffffff;
					background-color: $color_destaque;
					@include tablet {
						width: 100px;
						height: 100px;
						font-size: 40px;
					}
					@include mq-min(1920) {
						width: valor-fluido(100, 1920);
						height: valor-fluido(100, 1920);
						margin-bottom: valor-fluido(20, 1920);
						font-size: valor-fluido(40, 1920);
					}
					span{
						margin-top: -5px;
						@include mq-min(1920) {
							margin-top: valor-fluido(-5, 1920);
						}
					}
					img{
						display: block;
						max-width: 80%;
						height: auto;
					}
				}
				.info{
					flex-grow: 1;
					width: 100%;
					text-align: center;
					.titulo{
						font-weight: bold;
						line-height: 1.2;
						color: $color_destaque;
						font-size: 18px;
						margin-bottom: 10px;
						@include mq-min(1920) {
							font-size: valor-fluido(18, 1920);
							margin-bottom: valor-fluido(10, 1920);
						}
					}
					.texto{
						line-height: 1.2;
					}
				}
			}
		}
	}

	&.com-imagem{
		.itens{
			.lista{
				@include desktop {
					width: 46%;
				}
			}
		}
	}
	
	&.imagem-left{
		.itens{
			.img{
				@include desktop {
					float: left;
					width: 50%;
					margin-right: 4%;

					order: 0;
				}
			}
		}
	}
	&.imagem-right{
		.itens{
			.img{
				@include desktop {
					float: right;
					width: 50%;
					margin-left: 4%;

					order: 1;
				}
			}
		}
	}

	&.icone-left{
		.itens{
			.lista{
				li{
					flex-wrap: nowrap;
					.icone{
						order: 0;
						margin-right: 20px;
						margin-bottom: 0;
						@include mq-min(1920) {
							margin-right: valor-fluido(20, 1920);
						}
					}
					.info{
						order: 1;
						width: auto;
						text-align: left;
					}
				}
			}
		}
	}
	&.icone-right{
		.itens{
			.lista{
				li{
					flex-wrap: nowrap;
					.icone{
						order: 1;
						margin-left: 20px;
						margin-bottom: 0;
						@include mq-min(1920) {
							margin-left: valor-fluido(20, 1920);
						}
					}
					.info{
						order: 0;
						width: auto;
						text-align: right;
					}
				}
			}
		}
	}

	&.itens-h-right{
		.itens{
			.lista{
				justify-content: flex-end;
			}
		}
	}
	&.itens-h-left{
		.itens{
			.lista{
				justify-content: flex-start;
			}
		}
	}
	&.itens-h-center{
		.itens{
			.lista{
				justify-content: center;
			}
		}
	}

	&.itens-v-top{
		.itens{
			.lista{
				align-items: flex-start;
			}
		}
	}
	&.itens-v-base{
		.itens{
			.lista{
				align-items: flex-end;
			}
		}
	}
	&.itens-v-center{
		.itens{
			.lista{
				align-items: center;
			}
		}
	}

	&.itens-maximo-2{
		.itens{
			.lista{
				li{
					@include tablet {
						width: 49%;
						&:nth-child(n) { margin-left: 2% }
						&:nth-child(2n+1) { margin-left: 0 }
					}
				}
			}
		}
	}
	&.itens-maximo-3{
		.itens{
			.lista{
				li{
					@include tablet {
						width: 49%;
						&:nth-child(n) { margin-left: 2% }
						&:nth-child(2n+1) { margin-left: 0 }
					}
					@include desktop {
						width: 32%;
						&:nth-child(n) { margin-left: 2% }
						&:nth-child(3n+1) { margin-left: 0 }
					}
				}
			}
		}
	}
	&.itens-maximo-4{
		.itens{
			.lista{
				li{
					@include tablet {
						width: 49%;
						&:nth-child(n) { margin-left: 2% }
						&:nth-child(2n+1) { margin-left: 0 }
					}
					@include desktop {
						width: 23.5%;
						&:nth-child(n) { margin-left: 2% }
						&:nth-child(4n+1) { margin-left: 0 }
					}
				}
			}
		}
	}
	&.itens-maximo-5{
		.itens{
			.lista{
				li{
					@include tablet {
						width: 49%;
						&:nth-child(n) { margin-left: 2% }
						&:nth-child(2n+1) { margin-left: 0 }
					}
					@include desktop {
						width: 18.4%;
						&:nth-child(n) { margin-left: 2% }
						&:nth-child(5n+1) { margin-left: 0 }
					}
				}
			}
		}
	}
	&.itens-maximo-6{
		.itens{
			.lista{
				li{
					@include tablet {
						width: 49%;
						&:nth-child(n) { margin-left: 2% }
						&:nth-child(2n+1) { margin-left: 0 }
					}
					@include desktop {
						width: 15%;
						&:nth-child(n) { margin-left: 2% }
						&:nth-child(6n+1) { margin-left: 0 }
					}
				}
			}
		}
	}
}