
@media screen and ( min-width: 501px ) and ( max-width: 910px ) {


	/* WRAPPER */
	html.responsive .friends_that_play_content {
		border-top: 1px solid var(--gpBackground-LightMedium);
		padding-top: 16px;
	}


	html.responsive .responsive_friendblocks .friendBlock {
		padding: 8px;
		background-color: var(--gpBackground-LightSoft);
		font: var(--gpText-BodyMedium);
		height: unset;
		width: unset;
		transition: background-color 0.2s ease;
		margin: unset;
	}

	html.responsive .responsive_friendblocks .friendBlock:focus-within {
		background-color: var(--gpBackground-LightMedium);
	}

	html.responsive .responsive_friendblocks {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: var(--gpSpace-Gap);
	}

	.persona {
		color: var(--gpStoreLighterGrey);
	}

	html.responsive .friendBlock .whiteLink {
		background: var(--gpBackground-LightMedium);
		padding: 4px 12px;
		border-radius: var(--gpCorner-Medium);
		transition: all 0.2s ease;
	}

	html.responsive .friendBlock .whiteLink:hover {
		background: var(--gpBackground-LightHard);
	}

	html.responsive .friendBlock .whiteLink.gpfocus {
		background: white;
		color: black;
		border-radius: 0px;
	}

	html.responsive .friendBlock .span.friendSmallText {
		display: inline-flex;
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
	}

	html.responsive .friendSmallText {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

}