.news-container{
	display: flex;
	justify-content: space-between;

	.salons{
		flex:1;

		.titre{
			border-top: 1px solid $black;
			@extend %chapeau;
			margin-bottom: 15px;
			padding-top: 15px;
		}

		.news.salon{
			margin-bottom: 60px;

			img{
				margin-bottom: 15px;
			}
		}
	}

	.generales{
		flex: 3;

		.news{
			display: flex;

			.date{
				width: 25%;
				border-top: 1px solid $black;
				padding: 15px 0;
			}

			&.generale{
				margin-bottom: 30px;
			}

			.content{
				display: flex;

				.image{
					margin-right: 15px;
					max-width: 50%;
				}

				.textes{
					max-width: 30%;
				}

				.titre{
					@extend %chapeau;
					margin-top: -7px;
					margin-bottom: 15px;
				}
			}

			flex-direction: column;
		}
	}
}

@media screen and (max-width: 1024px){
	.news-container{
		padding: 0 10px;

		.salons{
			.titre{
				font-size: 1.3rem;
			}
		}

		.generales{
			flex: 2;

			.news{
				.content{
					.textes{
						max-width: 47%;
					}

					.titre{
						font-size: 1.3rem;
					}
				}
			}
		}
	}
}



@media screen and (max-width: 768px){
	.news-container{
		flex-direction: column;
		padding: 0 15px;
		align-items: center;

		.salons{
			order: 1;
			margin-bottom: 30px;
			display: flex;
			flex-direction: column;
			align-items: center;


			.news.salon{
				display: flex;
				flex-direction: column;

				.image{
					margin-bottom: 15px;

					img{
						display: block;
						margin: 0 auto;
					}
				}
			}

			img, .titre{
				max-width: 60%;
			}

			.titre{
				font-size: 1.1rem;
				text-align: center;
			}
		}

		.generales{
			order: 2;
			flex: 1;

			.news{
				flex-direction: column;
				.content{
					flex-direction: column;

					.image{
						margin-right: 0;
						max-width: 100%;
						margin-bottom: 15px;
					}

					.textes{
						max-width: 100%;
					}

					.titre{
						font-size: 1.3rem;
					}
				}
			}
		}
	}
}