footer {
	--footer-bg-color: var(--color-black);
	--footer-text-color: var(--color-black-contrast);
	--footer-block-padding: calc(var(--padding-rows) + 1rem);
	--footer-bar-padding: var(--padding-blocks);
	--footer-menu-gap-x: 2rem;
	--footer-menu-gap-y: 3rem;

	background-color: var(--footer-bg-color);
	color: var(--footer-text-color);
	display: block;
	text-align: left;
}

.footer-block {
	width: 100%;
	padding: var(--footer-block-padding) 0;
}

.footer-bar {
	width: 100%;
	padding: var(--footer-bar-padding) 0;
	grid-column: 1 / -1;
	font-size: 1.4rem;
}

/* horizizontal menu */
.footer-menu {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	grid-template-rows: repeat(2, max-content) auto;
	grid-template-areas: "menu-1 menu-2" 
						 "menu-3 menu-4" 
						 "socials logo";
	place-content: space-between;
	place-items: start;
	column-gap: var(--footer-menu-gap-x);
	row-gap: var(--footer-menu-gap-y);
	list-style: none;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.footer-menu > li.menu-item:nth-child(1) {
	grid-area: menu-1;
	padding-left: 1.5rem;
	border-left: 1px solid var(--color-white);
}

.footer-menu > li.menu-item:nth-child(2) {
	grid-area: menu-2;
	justify-self: end;
	text-align: right;
	padding-right: 1.5rem;
	border-right: 1px solid var(--color-white);
}

.footer-menu > li.menu-item:nth-child(3) {
	grid-area: menu-3;
	padding-left: 1.5rem;
	border-left: 1px solid var(--color-white);
}

.footer-menu > li.menu-item:nth-child(4) {
	grid-area: menu-4;
	justify-self: end;
	text-align: right;
	padding-right: 1.5rem;
	border-right: 1px solid var(--color-white);
}

.footer-menu > li.footer-logo-container {
	grid-area: logo;
	justify-self: end;
}

.footer-menu > li.footer-socials-container {
	grid-area: socials;
	align-self: end;
}

.footer-menu > li.menu-item {
	position: relative;
	text-box-trim: trim-both;
}

.footer-menu .nav-socials {
	display: grid !important
}

.footer-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu li {
}

.footer-menu .sub-menu li {
	padding-top: 0.5rem;
}

.footer-menu .menu-item-has-children {
	font-weight: bold;
	text-transform: uppercase;
}

.footer-menu .menu-item {
	margin: 0;
}

.footer-menu .sub-menu .menu-item a {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 400;
	text-transform: none;
}

.footer-logo {
	align-items: center;
	height: auto;
	width: 17rem;
}

.footer-top .container {
	position: relative;
}

.footer-content {
	position: relative;
	z-index: 2;
}

.footer-image {
	position: absolute;
	width: auto;
	aspect-ratio: 3 / 2;
	height: calc(100% + (var(--footer-block-padding) * 2));
	top: calc(0rem - var(--footer-block-padding));
	right: 0;
	z-index: 1;
	opacity: 0.6;
}

.footer-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

@media (min-width: 576px) {
	footer {
		--footer-menu-gap-x: 2.5rem;
	}
}

@media (min-width: 768px) {
	footer {
		--footer-menu-gap-x: 3rem;
	}

	.footer-menu {
		justify-content: space-between;
		grid-template-columns: repeat(4, max-content);
		grid-template-rows: max-content auto;
		grid-template-areas: "menu-1 menu-2 menu-3 menu-4" 
							"socials socials logo logo";
	}

	.footer-menu > li.menu-item:nth-child(2),
	.footer-menu > li.menu-item:nth-child(4) {
		padding-left: 1.5rem;
		border-left: 1px solid var(--color-white);
		padding-right: 0;
		border-right: 0 none;
		text-align: left;
		justify-self: start;
	}
}

@media (min-width: 1024px) {
	footer {
		--footer-menu-gap-x: 5rem;
	}

	.footer-menu {
		grid-template-columns: repeat(4, max-content) 1fr;
		grid-template-rows: auto 2.4rem;
		grid-template-areas: "menu-1 menu-2 menu-3 menu-4 logo" 
							"menu-1 menu-2 menu-3 menu-4 socials";
	}

	.footer-menu > li.footer-socials-container {
		justify-self: end;
	}
}

@media (min-width: 1280px) {
	footer {
		--footer-menu-gap-x: 6rem;
	}
}

@media (min-width: 1540px) {
	footer {
		--footer-menu-gap-x: 7rem;
	}
}