explainegy-nextjs/styles/modules/Footer.module.scss

@import "../variables.scss";
.footer {
	padding: 200px 15px 30px 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 50px 50px;

	.adContainer {
		background-color: #ff00003e;
		width: $footer-ad-container-width;
		height: $footer-ad-container-height;

		@media (max-width: $footer-ad-container-width) {
			width: 100%;
		}
	}
	.content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 100px 100px;
		align-items: center;

		@media (max-width: $footer-breakpoint-1) {
			column-gap: 10px;
		}

		@media (max-width: $footer-breakpoint-3) {
			grid-template-columns: 1fr;
			gap: 100px 20px;
		}

		.company {
			float: right;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100;
			flex-shrink: 0;
			flex: 1;
			text-align: center;
			column-gap: 10px;
			font-size: 0.8em;
			@media (max-width: $footer-breakpoint-1) {
				flex-direction: column;
				font-size: 0.7em;
				column-gap: 0px;
			}

			@media (max-width: $footer-breakpoint-3) {
				grid-row: 2;
			}
		}

		.links {
			display: flex;
			justify-content: right;
			align-items: center;

			.grid {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				gap: 20px 100px;

				@media (max-width: $footer-breakpoint-4) {
					column-gap: 15px;
				}
			}
		}
	}
}