@import "./variables";
@import "./mixins";

$profile-width: 16em;

main#main {
	.title {
		margin-top: $outer-gap;
		font-size: 3em;
		margin-bottom: 0;
	}

	> hr {
		margin-bottom: $outer-gap;
	}
}

#people-container {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(auto-fill, minmax($profile-width, 1fr) );
	grid-auto-rows: max-content;
	grid-gap: 2em;
	padding-left: $outer-gap;
	padding-right: $outer-gap;

	.profile {
		width: $profile-width;
		text-decoration: none;
		margin-left: auto;
		margin-right: auto;

		&:hover {
			outline: 1px solid $blue;
		}

		.name {
			font-weight: bold;
			font-size: 1.5em;
		}

		.pfp {
			border-radius: $inner-gap / 4;
			width: 100%;
			height: 100%;
			margin-bottom: $inner-gap;
		}
	}
}

#no-people {
	font-weight: bold;
	font-size: 1.2em;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}