.biglogocontainer {
	display: flex;
	flex-direction: row;
	background: var(--black1);
	margin: 1rem 0;
	border-radius: 8px;
	box-shadow: var(--shadow0);
	svg {
		min-width: 192px;
		min-height: 192px;
		@media screen and (max-width: 800px) {
			display: none;
		}
	}
	article {
		background: rgba(white, 5%);
		border-radius: 8px;
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
		@media screen and (max-width: 800px) {
			border-radius: 8px;
		}
		padding: 0.5rem 1rem;
		h1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 1rem;
			svg {
				display: inline;
				min-width: initial;
				min-height: initial;
				@media screen and (min-width: 801px) {
					display: none;
				}
			}
		}
		p {
			margin: 6px 0;
		}
	}
}
.persons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	@media screen and (max-width: 800px) {
		justify-content: center;
	}
	margin-top: 1rem;
	gap: 1.5rem;
	a {
		color: inherit;
		text-decoration: inherit;
		article {
			--radius: 6px;
			flex: 1;
			display: flex;
			flex-direction: row;
			background: var(--black1);
			border-radius: var(--radius);
			box-shadow: var(--shadow0);
			transition-duration: 100ms;
			animation-name: goIn;
			animation-duration: 200ms;
			@keyframes goIn {
				from {
					opacity: 0;
					transform: translate(0, 16px);
				}
			}
			img {
				width: 128px;
				max-width: 156px;
				flex: 1;
				border-top-left-radius: var(--radius);
				border-bottom-left-radius: var(--radius);
				// for alt text
				color: var(--grey);
				// for mollin's vertical picture to display well
				aspect-ratio: 1 / 1;
				object-fit: cover;
				object-position: 50% 35%;
			}
			div {
				min-width: 14rem;
				padding: 0 1rem;
				position: relative;
				.devBadge {
					position: absolute;
					bottom: 6px;
					right: 8px;
					background: rgba(violet, 0.18);
					font-family: var(--fonts-bold);
					padding: 1px 4px;
					border-radius: 2px;
				}
			}
			&:hover {
				background: var(--black2);
			}
		}
		@media screen and (max-width: 400px) {
			article {
				flex-direction: column;
				width: 100%;
				img {
					margin: 1rem auto;
					border-radius: 8px;
				}
				div {
					padding-bottom: 1rem;
				}
			}
		}
	}
}
.funfact {
	display: block;
	text-align: right;
	width: 100%;
	background: var(--black1);
	padding: 16px 0;
	margin: 16px 0;
	border-radius: 8px;
	box-shadow: var(--shadow0);
	p {
		text-align: center;
		margin-bottom: 12px;
		span {
			font-family: var(--fonts-bold);
			font-size: 1.5em;
			margin: 0 16px;
		}
	}
}