Vorlage:RandomPerson/style.css

.people-container {
	margin-top: 20px;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}
@media screen and (max-width: 1200px) {
	.people-container {
		grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
	}
}
@media screen and (max-width: 1200px) {
	.people-container {
		grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
	}
}
@media screen and (max-width: 992px) {
	.people-container {
		grid-template-columns: 50% 50%;
	}
}
.random-person {
	margin: 4px;
	display: flex;
	flex-direction: column;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.random-person img {
	width: 100%;
	height: 250px;
	object-fit: cover;
}
.random-person--name {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
    justify-content: center;
}
.random-person--name {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
    justify-content: center;
}
.random-person--description {
	font-size: 0.8em;
	padding: 0 16px 0 16px;
}
.random-person--description:last-child {
	padding: 0 16px 16px 16px;
}
.random-person--name span {
	font-weight: 500;
	font-size: 16px;
	text-align: center;
	padding: 16px 16px 8px 16px;
	margin-top: 0;
}
.random-person--name:last-child span {
	padding: 16px;
}