Furality Friends Compact Mode CSS override

FuralityFriendsCompactMode.css

.container > div > div:nth-child(2) {
	--gap-size: 1rem;
	
	display: flex;
	gap: var(--gap-size);
	flex-wrap: wrap;
}

.container .card {
	flex-basis: calc(33.333% - var(--gap-size));
	margin: 0 !important;
}

.container .card .card-body p {
	display: none !important;
}

.container .card > .card-body.media {
	padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x) calc(var(--bs-card-spacer-y) / 2);
}

.container .card > .card-body.media:first-of-type {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 0 0 auto;
}

.container .card > .card-body > a {
	display: initial;
	margin: calc(var(--bs-card-spacer-y) * -1) calc(var(--bs-card-spacer-x) * -1) 0 !important;
	width: auto !important;
}

[class^=WorldFriendsList] {
	margin: 0;
}

[class^=WorldFriendsList] > span:first-child {
	display: none;
}

[class^=WorldFriendsList] > span:last-child {
	margin: 0 !important;
	padding: 0 1rem;
	display: block;
}

.container .card .rounded-pill {
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
}

.container .card [class^=WorldFriendsListRow_actions] {
	align-self: initial;
	align-items: center;
}

.container .card [class^=WorldFriendsListRow_actions] button {
	align-self: stretch;
}


@media screen and (max-width: 1024px) {
	.container .card {
		flex-basis: calc(50% - var(--gap-size));
	}
	
	.container .card .card-body p {
		display: none !important;
	}
}

@media screen and (max-width: 768px) {
	.container .card {
		flex-basis: 100%;
	}
	
	.container .card .card-body p {
		display: none !important;
	}
}