section {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
section

/*Huggers:*/
.hug, .vhug, .mini-hug, .big-hug, .button, button {
	display: flex;
}
a.hug, a.spread {
	display: flex!important;
	white-space: nowrap;
}
.hug, .big-hug, .mini-hug, .button, button {
	flex-direction: row;
}
.hug, .vhug, h1 { 
	gap:8px;
}
.mini-hug, button, .button{
	gap:4px;
}
.big-hug {
	gap:8px;
}
section > .big-hug {
	gap:30px;
}
*:is(.hug, .mini-hug, .big-hug, hgroup, h1, .button, button) > * {
	margin-top: auto;
	margin-bottom: auto;
}

.hug-wide {
	gap:24px;
}

.spread {
	display: flex;
	gap:8px;
	width: 100%;
}
.spread > *:not(:first-child):last-child {
	text-align: right;
}
.spread > * {
	margin: auto;
	margin-top: auto;
	margin-bottom: auto;
}
.spread > *:first-child {
	margin-left: 0px;
}
.spread > *:not(:first-child):last-child {
	margin-right: 0px;
} 
.vhug {
	flex-direction: column;
}
.vhug > * {
	
}
.spread, .vspread {
	display: flex!important;
	justify-content: space-between;
}
.vspread { 
	flex-direction: column;
}
.vspread > * {
	
}
.vspread > *:first-child {
	margin-top: 0px!important;
}
.vspread > *:last-child {
	margin-bottom: 0px;
}
.vspread > .group:last-child {
	margin-top: auto!important;
}


*:is([class*="hug"]) .card {
	margin-top: 0px;
	width: 100%;
}
a.spread:not(.selected) *:is(span, i)[class*="fa-"][class*="right"] {
	opacity: 0;
}