#footer{
	background-color: $black;
	color: $white;
	min-height: 310px;
	padding-top: 45px;
	margin-top: 120px;

	.call{
		border-bottom: 1px solid $white;
		margin-bottom: 15px;
		color: $white;

		&.black{
			color: $black;
		}
	}

	.content{
		max-width: 66.666%;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 42% 33% 25%;
		grid-column-gap: 15px;
	}

	.collections{
		.liste{
			column-count: 2;
		}
	}

	.social{
		.icons{
			display: flex;
			margin-top: 10px;
		}
	}

	.titre{
		@extend %chapeau;
		@extend .white;
		border-bottom: 1px solid $white;
	}
}

@media screen and (max-width: 1024px){
	#footer{
		padding: 45px 15px 20px 15px;


		.titre{
			font-size: 1.2rem;
		}

		.content{
			max-width: 100%;
			grid-template-columns: 40% 30% 1fr;
		}

		.collections{
			.liste{
				column-count: 1;
			}
		}
	}
}


@media screen and (max-width: 768px){
	#footer{
		padding: 20px;

		.content{
			grid-template-columns: 1fr 1fr;
		}

		.social{
			grid-column: 1 / 3;
			margin-top: 30px;
		}

		.collections{
			.liste{
				column-count: 1;
			}
		}
	}
}