diff --git a/stylesheets/commons/PanelBox/Heroes.scss b/stylesheets/commons/PanelBox/Heroes.scss
index 7198a4d67f1..65cb1995694 100644
--- a/stylesheets/commons/PanelBox/Heroes.scss
+++ b/stylesheets/commons/PanelBox/Heroes.scss
@@ -1,165 +1,166 @@
-.heroes-panel {
-	&__category {
-		&-title {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			border-bottom: 0.5rem solid;
-			padding: 0.5rem 0;
-			margin-bottom: 0.5rem;
-
-			.category--strength & {
-				.theme--light & {
-					border-bottom-color: var( --clr-california-40 );
-				}
+// This file has been hacked to work around from php-scss 1.x bugs
+// Once we upgrade to php-scss 2.0, these hacks should be reverted
 
-				.theme--dark & {
-					border-bottom-color: var( --clr-california-80 );
-				}
+.heroes-panel__category {
+	&-title {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-bottom: 0.5rem solid;
+		padding: 0.5rem 0;
+		margin-bottom: 0.5rem;
+
+		.category--strength & {
+			.theme--light & {
+				border-bottom-color: var( --clr-california-40 );
 			}
 
-			.category--agility & {
-				.theme--light & {
-					border-bottom-color: var( --clr-semantic-positive-40 );
-				}
+			.theme--dark & {
+				border-bottom-color: var( --clr-california-80 );
+			}
+		}
 
-				.theme--dark & {
-					border-bottom-color: var( --clr-semantic-positive-80 );
-				}
+		.category--agility & {
+			.theme--light & {
+				border-bottom-color: var( --clr-semantic-positive-40 );
 			}
 
-			.category--intelligence & {
-				.theme--light & {
-					border-bottom-color: var( --clr-sapphire-40 );
-				}
+			.theme--dark & {
+				border-bottom-color: var( --clr-semantic-positive-80 );
+			}
+		}
 
-				.theme--dark & {
-					border-bottom-color: var( --clr-sapphire-80 );
-				}
+		.category--intelligence & {
+			.theme--light & {
+				border-bottom-color: var( --clr-sapphire-40 );
 			}
 
-			.category--universal & {
-				.theme--light & {
-					border-bottom-color: var( --clr-gigas-40 );
-				}
+			.theme--dark & {
+				border-bottom-color: var( --clr-sapphire-80 );
+			}
+		}
 
-				.theme--dark & {
-					border-bottom-color: var( --clr-gigas-80 );
-				}
+		.category--universal & {
+			.theme--light & {
+				border-bottom-color: var( --clr-gigas-40 );
 			}
 
-			.category--upcoming & {
-				.theme--light & {
-					border-bottom-color: var( --clr-secondary-25 );
-				}
+			.theme--dark & {
+				border-bottom-color: var( --clr-gigas-80 );
+			}
+		}
 
-				.theme--dark & {
-					border-bottom-color: var( --clr-secondary-100 );
-				}
+		.category--upcoming & {
+			.theme--light & {
+				border-bottom-color: var( --clr-secondary-25 );
 			}
 
-			> a {
-				font-weight: bold;
-				margin-right: 0.5rem;
+			.theme--dark & {
+				border-bottom-color: var( --clr-secondary-100 );
 			}
 		}
 
-		@at-root ul#{&}-list {
-			$_gutter-y: 0.5rem;
-			$_gutter-x: 0.5rem;
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: center;
-			list-style: none;
-			margin: calc( -0.5 * $_gutter-y ) calc( -0.5 * $_gutter-x ) 0.5rem calc( -0.5 * $_gutter-x );
-
-			> li {
-				flex: 0 0 auto;
-				width: calc( 100% / 3 );
-				max-width: 100%;
-				padding: calc( $_gutter-x * 0.5 );
-				margin-bottom: 0;
-
-				@media ( min-width: 576px ) {
-					width: calc( 100% / 4 );
-				}
+		> a {
+			font-weight: bold;
+			margin-right: 0.5rem;
+		}
+	}
 
-				@media ( min-width: 768px ) {
-					width: calc( 100% / 6 );
-				}
+	@at-root ul.heroes-panel__category-list {
+		$_guttery: 0.5rem;
+		$_gutterx: 0.5rem;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		list-style: none;
+		margin: calc( -0.5 * #{$_guttery} ) calc( -0.5 * #{$_gutterx} ) 0.5rem calc( -0.5 * #{$_gutterx} );
+
+		> li {
+			flex: 0 0 auto;
+			width: calc( 100% / 3 );
+			max-width: 100%;
+			padding: calc( #{$_gutterx} * 0.5 );
+			margin-bottom: 0;
+
+			@media ( min-width: 576px ) {
+				width: calc( 100% / 4 );
+			}
 
-				@media ( min-width: 1024px ) {
-					width: calc( 100% / 8 );
-				}
+			@media ( min-width: 768px ) {
+				width: calc( 100% / 6 );
+			}
+
+			@media ( min-width: 1024px ) {
+				width: calc( 100% / 8 );
 			}
 		}
 	}
+}
 
-	@at-root div.heroes-panel #{&}__hero-card {
-		$_border-radius: 0.25rem;
-		display: flex;
-		position: relative;
-		height: 3.5rem;
+body.mediawiki div.heroes-panel__hero-card {
+	$_border-radius: 0.25rem;
+	display: flex;
+	position: relative;
+	height: 3.5rem;
+	border-radius: $_border-radius;
+
+	&::before {
+		content: "";
+		box-shadow: inset 0 0 0 0.125rem rgba( 0, 0, 0, 0.7 );
+		position: absolute;
+		inset: 0;
+		z-index: 1;
 		border-radius: $_border-radius;
+	}
 
-		&::before {
-			content: "";
-			box-shadow: inset 0 0 0 0.125rem rgba( 0, 0, 0, 0.7 );
-			position: absolute;
-			inset: 0;
-			z-index: 1;
-			border-radius: $_border-radius;
-		}
+	&.is--unselected {
+		filter: grayscale( 1 );
+	}
 
-		&.is--unselected {
-			filter: grayscale( 1 );
-		}
+	> img {
+		display: flex;
+		object-fit: cover;
+		width: 100%;
+		height: 100%;
+		border-radius: $_border-radius;
+	}
 
-		> img {
-			display: flex;
-			object-fit: cover;
-			width: 100%;
-			height: 100%;
-			border-radius: $_border-radius;
-		}
+	&__title {
+		color: #ffffff;
+		font-weight: bold;
+		text-shadow: 0 0.0625rem 0.0625rem #000000, 0 0 0.125rem #000000;
+		font-size: 0.6875rem;
+		position: absolute;
+		inset: 0;
+		display: flex;
+		justify-content: space-evenly;
+		align-items: stretch;
 
-		&__title {
+		& > a {
 			color: #ffffff;
-			font-weight: bold;
-			text-shadow: 0 0.0625rem 0.0625rem #000000, 0 0 0.125rem #000000;
-			font-size: 0.6875rem;
-			position: absolute;
-			inset: 0;
 			display: flex;
-			justify-content: space-evenly;
-			align-items: stretch;
+			align-items: flex-end;
+			padding-bottom: 0.25rem;
+			flex: 1;
+			justify-content: center;
+			text-align: center;
 
-			& > a {
+			&::before {
+				content: "";
+				position: absolute;
+				inset: 0;
+				z-index: 1;
+			}
+
+			&:visited {
 				color: #ffffff;
-				display: flex;
-				align-items: flex-end;
-				padding-bottom: 0.25rem;
-				flex: 1;
-				justify-content: center;
-				text-align: center;
-
-				&::before {
-					content: "";
-					position: absolute;
-					inset: 0;
-					z-index: 1;
-				}
+			}
 
-				&:visited {
+			@media ( hover: hover ) {
+				&:hover,
+				&:visited:hover {
 					color: #ffffff;
-				}
-
-				@media ( hover: hover ) {
-					&:hover,
-					&:visited:hover {
-						color: #ffffff;
-						background: linear-gradient( rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 0.5 ) );
-					}
+					background: linear-gradient( rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 0.5 ) );
 				}
 			}
 		}