/******
// snxg app - Discover Page Style
// Theme: 'origin'
******/
#content-wrapper h1 {
	font-size: clamp(1.3rem, 2vw + 1rem, 2rem);
	text-align: center;
	margin-bottom: 30px;
}

/* Profile grid wrapper */
#profiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	width: 95vw;
	max-width: 800px;
	margin: 50px auto 0 auto;
}

/* Individual profile card - smaller */
.profile {
	position: relative; /* for badges */
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 calc(22% - 12px); /* ~1/3 smaller than before */
	min-width: 70px;
	max-width: 170px;
	margin-bottom: 15px;
}

/* Profile picture */
.profile_picture {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

/* Badges container */
.profile_badges {
	position: absolute;
	bottom: 4px;
	right: 4px;
	display: flex;
	gap: 4px;
	z-index: 10;
}

/* Badge image - 1/3 smaller */
img.badge {
	width: 16px;   /* previously 24px, reduced by 1/3 */
	height: 16px;
	object-fit: cover;
	border-radius: 50%;
}

/* Tablet: shrink profiles slightly */
@media screen and (max-width: 768px) {
	.profile {
		flex: 1 1 calc(30% - 12px);
		min-width: 60px;
		max-width: 140px;
	}
	img.badge {
		width: 14px;
		height: 14px;
	}
}

/* Mobile: fit 3 profiles per row */
@media screen and (max-width: 480px) {
	.profile {
		flex: 1 1 calc(32% - 8px); /* slightly smaller width to fit 3 */
		min-width: 50px;
		max-width: 120px;
	}
	img.badge {
		width: 12px;
		height: 12px;
	}
}