.portrait-community-trophy-badge {
	align-items: center;
	display: inline-flex;
	font-size: 1em;
	line-height: 1;
	margin-inline-start: .25rem;
	vertical-align: middle;
}

.portrait-community-trophy-grid,
.portrait-community-trophy-progress {
	display: grid;
	gap: .75rem;
	list-style: none;
	margin: 1rem 0 1.5rem;
	padding: 0;
}

.portrait-community-trophy-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.portrait-community-trophy-card {
	align-items: flex-start;
	border: 1px solid #dcdcde;
	border-radius: .5rem;
	display: flex;
	gap: .75rem;
	padding: 1rem;
}

.portrait-community-trophy-card__icon {
	font-size: 1.75rem;
	line-height: 1;
}

.portrait-community-trophy-card p {
	margin: .25rem 0;
}

.portrait-community-trophy-card time,
.portrait-community-trophy-progress span {
	color: var(--pc-color-text-supporting, #343a3d);
	font-weight: 500;
	font-size: .9rem;
}

.portrait-community-trophy-select {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.5rem 0;
}

.portrait-community-trophy-select label {
	flex-basis: 100%;
	font-weight: 600;
}

.portrait-community-trophy-select select,
.portrait-community-trophy-select button {
	min-height: 44px;
}

.portrait-community-trophy-progress li {
	display: grid;
	gap: .35rem;
}

.portrait-community-trophy-progress progress {
	inline-size: min(100%, 28rem);
}