footer {
	container-type: inline-size;
	font-size: 16px;
	padding-bottom: var(--bottom);
}

footer a {
	text-decoration: none;;
}
footer a:hover {
	text-decoration: underline;
}

#ssfoot {
	background-color: var(--ss-bg);
	border-top: 1px solid var(--ss-border);
	border-bottom: 1px solid var(--ss-border);
	padding: 20px 0;
}

#ssfoot > div {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 10px;
	grid-template-areas:
		"addr ul1 ul2 contact"
	;
	max-width: var(--pageWidth);
	margin: auto;
}
#ssfoot p {
	margin: 0 0 .2em 0;
}
#ssfoot nav ul {
	list-style-type: none;
}
#ssfoot .ssaddr {
	grid-area: addr;
}
#ssfoot .sscol-1 {
	grid-area: ul1;
}
#ssfoot .sscol-2 {
	grid-area: ul2;
}
#ssfoot .sscontact {
	grid-area: contact;
}

#sssign {
	font-size: .8rem;
	max-width: var(--pageWidth);
	padding: 20px 0 30px 0;
	margin: auto;
}
#sssign.menu {
	text-align: center;
}
#sssign:not(.ssmenu) {
	text-align: center;
}
#sssign.ssmenu {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
}
#sssign span {
	display: inline-block;
}
#sssign li {
	display: inline-block;
}
#sssign li:not(:first-child):before {
	content: ' | ';
}

@container (max-width: 1220px) {
	#sssign > div, #ssfoot > div {
		margin-left: 10px;
		margin-right: 10px;
	}
}
@container (max-width: 1000px) {
	#ssfoot > div {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"ul1 ul2"
			"addr contact"
		;
	}
}
@container (max-width: 800px) {
	#sssign.ssmenu {
		grid-template-columns: 1fr;
		text-align: center;
	}
}
@container (max-width: 500px) {
	#ssfoot > div{
		grid-template-columns: 1fr;
		grid-template-areas:
			"ul1"
			"ul2"
			"addr"
			"contact"
		;
	}
}
@container (max-width: 400px) {
	#sssign li {
		display: block;
	}
	#sssign li:not(:first-child):before {
		content: unset;
	}
}