Refactor TR styles to tighten up vertical spacing

Author: NicolaSaunders

assets-src/styles/sass/50-core-components/_family-series-list.scss

@@ -3,9 +3,9 @@
 \*------------------------------------*/
 
 .family-grouping {
-    padding-top: rem(40);
+    padding-block-start: rem(28);
 }
 
 .family-grouping h2 + * {
-    margin-top: 1rem;
+    margin-block-start: 1rem;
 }

assets-src/styles/sass/80-templates/_technical-reports.scss

@@ -9,8 +9,8 @@
 
 	.hero {
 		background-color: $white;
-		margin-bottom: rem(20);
-		padding-bottom: rem(40);
+		margin-block-end: rem(20);
+		padding-block-end: 0;
 
 		.l-box {
 			background-color: #f3f3f6;
@@ -37,8 +37,9 @@
 	.tr-list__item {
 		@include stack(0.5em);
 		@include txt-pluto;
-		padding-bottom: rem(24);
-		padding-top: rem(24);
+        border-block-end: 1px solid $twiki-gray;
+		padding-block-end: rem(8);
+		padding-block-start: rem(20);
 
 		> * {
 			max-width: rem(820);
@@ -49,21 +50,17 @@
 		@include txt-mars;
 	}
 
-	.tr-list__item + .tr-list__item {
-		border-top: 1px solid $twiki-gray;
-	}
-
 	.tr-list__item__header {
 		@include stack;
 		align-items: flex-start;
 
 		h3 {
-			margin-bottom: 0;
-			margin-top: rem(5);
+			margin-block-end: 0;
+			margin-block-start: rem(5);
 		}
 
 		h3 + * {
-			margin-top: 0;
+            margin-block-start: 0;
 			order: -1;
 		}
 	}

public/dist/assets/styles/core.css

@@ -4008,11 +4008,11 @@ input[type=search] {
     #Family/Series list
 \*------------------------------------*/
 .family-grouping {
-  padding-top: 2.5rem;
+  padding-block-start: 1.75rem;
 }
 
 .family-grouping h2 + * {
-  margin-top: 1rem;
+  margin-block-start: 1rem;
 }
 
 /*------------------------------------*\
@@ -4916,8 +4916,8 @@ input[type=search] {
 }
 .technical-reports .hero {
   background-color: #fff;
-  margin-bottom: 1.25rem;
-  padding-bottom: 2.5rem;
+  margin-block-end: 1.25rem;
+  padding-block-end: 0;
 }
 .technical-reports .hero .l-box {
   background-color: #f3f3f6;
@@ -4940,8 +4940,9 @@ input[type=search] {
   justify-content: flex-start;
   font-size: 0.9375rem;
   line-height: 1.5;
-  padding-bottom: 1.5rem;
-  padding-top: 1.5rem;
+  border-block-end: 1px solid #bdbdbd;
+  padding-block-end: 0.5rem;
+  padding-block-start: 1.25rem;
 }
 .tr-list .tr-list__item > * + * {
   margin-top: 0.5em;
@@ -4953,9 +4954,6 @@ input[type=search] {
   font-size: 1.5rem;
   line-height: 1.4;
 }
-.tr-list .tr-list__item + .tr-list__item {
-  border-top: 1px solid #bdbdbd;
-}
 .tr-list .tr-list__item__header {
   display: flex;
   flex-direction: column;
@@ -4966,11 +4964,11 @@ input[type=search] {
   margin-top: 1em;
 }
 .tr-list .tr-list__item__header h3 {
-  margin-bottom: 0;
-  margin-top: 0.3125rem;
+  margin-block-end: 0;
+  margin-block-start: 0.3125rem;
 }
 .tr-list .tr-list__item__header h3 + * {
-  margin-top: 0;
+  margin-block-start: 0;
   order: -1;
 }