.president-wrapper {
	container-name: presidentContainer;
	container-type: inline-size;
}
.presidents {
	background: var(--sidebar-bg);
	padding: 1rem;

	.president-list {
		columns: 1;

		* {
			font-size: 15px;
		}

		.president-listing {
			white-space: nowrap;
		}
	}
}
@container presidentContainer (min-width: 440px) {
	.presidents {
		.president-list {
			columns: 2;
		}
	}
}
@container presidentContainer (min-width: 750px) {
	.presidents {
		.president-list {
			columns: 3;
			padding: 0 0.5rem;
		}
	}
}
@container presidentContainer (min-width: 950px) {
	.presidents {
		padding: 1.5rem;

		.president-list {
			columns: 4;
			padding: 0 1rem;
		}
	}
}
@container presidentContainer (min-width: 1200px) {
	.presidents {
		padding: 2rem;

		.president-list {
			columns: 5;
		}
	}
}