diff --git a/tests/PortableInfoboxRenderServiceTest.php b/tests/PortableInfoboxRenderServiceTest.php
index 88777a9..07cf9b4 100644
--- a/tests/PortableInfoboxRenderServiceTest.php
+++ b/tests/PortableInfoboxRenderServiceTest.php
@@ -828,25 +828,25 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 							  <section class="pi-item pi-group pi-border-color">
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 1</h3>
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 2</h3>
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 3</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 1</h3>
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 2</h3>
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 3</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 1</div>
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 2</div>
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 3</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 1</div>
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 2</div>
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 3</div>
 										</section>
 									</section>
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);">Test 4</h3>
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);">Test 5</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 4</h3>
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 5</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 4</div>
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 5</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 4</div>
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 5</div>
 										</section>
 									</section>
 								</section>
@@ -908,23 +908,23 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 								<section class="pi-item pi-group pi-border-color">
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 1</h3>
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 2</h3>
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 3</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 1</h3>
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 2</h3>
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 3</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 1</div>
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 2</div>
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 3</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 1</div>
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 2</div>
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 3</div>
 										</section>
 									</section>
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 1 * 100%);">Test 4</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">Test 4</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 1 * 100%);">test value 4</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">test value 4</div>
 										</section>
 									</section>
 								</section>
@@ -959,11 +959,11 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 							  <section class="pi-item pi-group pi-border-color">
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 1 * 100%);">Test 1</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">Test 1</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 1 * 100%);">test value 1</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">test value 1</div>
 										</section>
 									</section>
 								</section>
@@ -1007,13 +1007,13 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 							  <section class="pi-item pi-group pi-border-color">
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(2 / 3 * 100%);">Test 1</h3>
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 2</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(2 / 3 * 100%);">Test 1</h3>
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 2</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(2 / 3 * 100%);">test value 1</div>
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 2</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(2 / 3 * 100%);">test value 1</div>
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 2</div>
 										</section>
 									</section>
 								</section>
@@ -1057,13 +1057,13 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 								<section class="pi-item pi-group pi-border-color">
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(2 / 3 * 100%);">Test 1</h3>
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 2</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(2 / 3 * 100%);">Test 1</h3>
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 2</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(2 / 3 * 100%);">test value 1</div>
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 2</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(2 / 3 * 100%);">test value 1</div>
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 2</div>
 										</section>
 									</section>
 								</section>
@@ -1116,27 +1116,27 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 								<section class="pi-item pi-group pi-border-color">
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(2 / 2 * 100%);">Test 1</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">Test 1</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(2 / 2 * 100%);">test value 1</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">test value 1</div>
 										</section>
 									</section>
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(2 / 2 * 100%);">Test 2</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">Test 2</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(2 / 2 * 100%);">test value 2</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">test value 2</div>
 										</section>
 									</section>
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(2 / 2 * 100%);">Test 3</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">Test 3</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(2 / 2 * 100%);">test value 3</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">test value 3</div>
 										</section>
 									</section>
 								</section>
@@ -1216,13 +1216,13 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 								<section class="pi-item pi-group pi-border-color">
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);">Test 1</h3>
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);">Test 2</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 1</h3>
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 2</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 1</div>
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 2</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 1</div>
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 2</div>
 										</section>
 									</section>
 									<div class="pi-item pi-data pi-item-spacing pi-border-color">
@@ -1230,15 +1230,15 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 										<div class="pi-data-value pi-font">test value 3</div>
 									</div>
 									<section class="pi-item pi-smart-group pi-border-color">
-										<section class="pi-smart-group-head pi-item-spacing">
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 4</h3>
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 5</h3>
-											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 6</h3>
+										<section class="pi-smart-group-head">
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 4</h3>
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 5</h3>
+											<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 6</h3>
 										</section>
-										<section class="pi-smart-group-body pi-item-spacing">
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 4</div>
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 5</div>
-											<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 6</div>
+										<section class="pi-smart-group-body">
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 4</div>
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 5</div>
+											<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 6</div>
 										</section>
 									</section>
 								</section>
@@ -1318,25 +1318,25 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 							  <section class="pi-item pi-group pi-border-color">
 							  	<section class="pi-item pi-smart-group pi-border-color">
-									<section class="pi-smart-group-head pi-item-spacing">
-										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 1</h3>
-										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 2</h3>
-										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 3 * 100%);">Test 3</h3>
+									<section class="pi-smart-group-head">
+										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 1</h3>
+										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 2</h3>
+										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 3</h3>
 									</section>
-									<section class="pi-smart-group-body pi-item-spacing">
-										<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 1</div>
-										<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 2</div>
-										<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 3 * 100%);">test value 3</div>
+									<section class="pi-smart-group-body">
+										<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 1</div>
+										<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 2</div>
+										<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 3</div>
 									</section>
 								</section>
 								<section class="pi-item pi-smart-group pi-border-color">
-									<section class="pi-smart-group-head pi-item-spacing">
-										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);">Test 4</h3>
-										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);">Test 5</h3>
+									<section class="pi-smart-group-head">
+										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 4</h3>
+										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 5</h3>
 									</section>
-									<section class="pi-smart-group-body pi-item-spacing">
-										<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 4</div>
-										<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 5</div>
+									<section class="pi-smart-group-body">
+										<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 4</div>
+										<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 5</div>
 									</section>
 								</section>
 								<div class="pi-item pi-data pi-item-spacing pi-border-color">
@@ -1393,21 +1393,21 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 							  <section class="pi-item pi-group pi-border-color">
 							  	<section class="pi-item pi-smart-group pi-border-color">
-									<section class="pi-smart-group-head pi-item-spacing">
-										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(40 / 40 * 100%);">Test 1</h3>
+									<section class="pi-smart-group-head">
+										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(40 / 40 * 100%);">Test 1</h3>
 									</section>
-									<section class="pi-smart-group-body pi-item-spacing">
-										<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(40 / 40 * 100%);">test value 1</div>
+									<section class="pi-smart-group-body">
+										<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(40 / 40 * 100%);">test value 1</div>
 									</section>
 								</section>
 								<section class="pi-item pi-smart-group pi-border-color">
-									<section class="pi-smart-group-head pi-item-spacing">
-										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);">Test 2</h3>
-										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);">Test 3</h3>
+									<section class="pi-smart-group-head">
+										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 2</h3>
+										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 3</h3>
 									</section>
-									<section class="pi-smart-group-body pi-item-spacing">
-										<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 2</div>
-										<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 3</div>
+									<section class="pi-smart-group-body">
+										<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 2</div>
+										<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 3</div>
 									</section>
 								</section>
 							  </section>
@@ -1460,27 +1460,27 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 							  <section class="pi-item pi-group pi-border-color">
 							  	<section class="pi-item pi-smart-group pi-border-color">
-									<section class="pi-smart-group-head pi-item-spacing">
-										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 1 * 100%);">Test 1</h3>
+									<section class="pi-smart-group-head">
+										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">Test 1</h3>
 									</section>
-									<section class="pi-smart-group-body pi-item-spacing">
-										<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 1 * 100%);">test value 1</div>
+									<section class="pi-smart-group-body">
+										<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">test value 1</div>
 									</section>
 								</section>
 								<section class="pi-item pi-smart-group pi-border-color">
-									<section class="pi-smart-group-head pi-item-spacing">
-										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(40 / 40 * 100%);">Test 2</h3>
+									<section class="pi-smart-group-head">
+										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(40 / 40 * 100%);">Test 2</h3>
 									</section>
-									<section class="pi-smart-group-body pi-item-spacing">
-										<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(40 / 40 * 100%);">test value 2</div>
+									<section class="pi-smart-group-body">
+										<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(40 / 40 * 100%);">test value 2</div>
 									</section>
 								</section>
 								<section class="pi-item pi-smart-group pi-border-color">
-									<section class="pi-smart-group-head pi-item-spacing">
-										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 1 * 100%);">Test 3</h3>
+									<section class="pi-smart-group-head">
+										<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">Test 3</h3>
 									</section>
-									<section class="pi-smart-group-body pi-item-spacing">
-										<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 1 * 100%);">test value 3</div>
+									<section class="pi-smart-group-body">
+										<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">test value 3</div>
 									</section>
 								</section>
 							  </section>
@@ -1539,22 +1539,22 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 							  <section class="pi-item pi-group pi-border-color">
 								<section class="pi-item pi-smart-group pi-border-color">
-								  <section class="pi-smart-group-head pi-item-spacing">
-									<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);">Test 1</h3>
-									<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);">Test 2</h3>
+								  <section class="pi-smart-group-head">
+									<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 1</h3>
+									<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 2</h3>
 								  </section>
-								  <section class="pi-smart-group-body pi-item-spacing">
-									<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 1</div>
-									<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 2</div>
+								  <section class="pi-smart-group-body">
+									<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 1</div>
+									<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 2</div>
 								  </section>
 								</section>
 								<h2 class="pi-item pi-item-spacing pi-title">title value</h2>
 								<section class="pi-item pi-smart-group pi-border-color">
-								  <section class="pi-smart-group-head pi-item-spacing">
-									<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 1 * 100%);">Test 3</h3>
+								  <section class="pi-smart-group-head">
+									<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">Test 3</h3>
 								  </section>
-								  <section class="pi-smart-group-body pi-item-spacing">
-									<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 1 * 100%);">test value 3</div>
+								  <section class="pi-smart-group-body">
+									<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">test value 3</div>
 								  </section>
 								</section>
 							  </section>
@@ -1622,20 +1622,20 @@ class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
 				'output' => '<aside class="portable-infobox pi-background">
 							  <section class="pi-item pi-group pi-border-color">
 								<section class="pi-item pi-smart-group pi-border-color">
-								  <section class="pi-smart-group-body pi-item-spacing">
-									<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 1</div>
-									<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 2</div>
+								  <section class="pi-smart-group-body">
+									<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 1</div>
+									<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 2</div>
 								  </section>
 								</section>
 								<h2 class="pi-item pi-item-spacing pi-title">title value</h2>
 								<section class="pi-item pi-smart-group pi-border-color">
-								  <section class="pi-smart-group-head pi-item-spacing">
-									<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);"></h3>
-									<h3 class="pi-smart-data-label pi-data-label pi-secondary-font" style="width: calc(1 / 2 * 100%);">Test 4</h3>
+								  <section class="pi-smart-group-head">
+									<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);"></h3>
+									<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 4</h3>
 								  </section>
-								  <section class="pi-smart-group-body pi-item-spacing">
-									<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 3</div>
-									<div class="pi-smart-data-value pi-data-value pi-font" style="width: calc(1 / 2 * 100%);">test value 4</div>
+								  <section class="pi-smart-group-body">
+									<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 3</div>
+									<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 4</div>
 								  </section>
 								</section>
 							  </section>