items-row changes (font size, img crop, bg options)

wordpress/wp-content/themes/makeitopen/acf-json/group_603c986dd28a4.json

@@ -567,6 +567,27 @@
                                     "return_format": "array"
                                 }
                             ]
+                        },
+                        {
+                            "key": "field_604f97c2a3f8d",
+                            "label": "Background",
+                            "name": "background",
+                            "type": "clone",
+                            "instructions": "",
+                            "required": 0,
+                            "conditional_logic": 0,
+                            "wrapper": {
+                                "width": "",
+                                "class": "",
+                                "id": ""
+                            },
+                            "clone": [
+                                "field_6040ff3b377be"
+                            ],
+                            "display": "seamless",
+                            "layout": "block",
+                            "prefix_label": 0,
+                            "prefix_name": 0
                         }
                     ],
                     "min": "",
@@ -595,5 +616,5 @@
     "hide_on_screen": "",
     "active": true,
     "description": "",
-    "modified": 1615403207
+    "modified": 1615828951
 }
\ No newline at end of file

wordpress/wp-content/themes/makeitopen/assets/scss/global/_base.scss

@@ -37,7 +37,7 @@ body {
 
 	h1 {
 		margin: 0;
-		@include colouredBar($red, $bg-yellow);
+		@include colouredBar($blue, $bg-yellow);
 		text-shadow: -3px 3px #FFF, 3px 3px #FFF;
 
 		.descender:after {

wordpress/wp-content/themes/makeitopen/assets/scss/partials/_items.scss

@@ -15,19 +15,17 @@
 
 					.img {
 						width: 100%;
+						height: 0;
+						padding-bottom: 100%;
+						position: relative;
 
-						img {
-							width: 100%;
+						&--contain img {
+							object-position: center center;
 						}
 
-						&--cover {
-							height: 0;
-							padding-bottom: 100%;
-							position: relative;
-
-							img {
-								position: absolute;
-							}
+						img {
+							position: absolute;
+							width: 100%;
 						}
 					}
 
@@ -53,17 +51,11 @@
 				.img {
 					@media only screen and (min-width: $medium) {
 						width: 250px;
-
-						&--cover {
-							height: 250px;
-						}
+						height: 250px;
 					}
 					@media only screen and (min-width: $large) {
 						width: 320px;
-
-						&--cover {
-							height: 320px;
-						}
+						height: 320px;
 					}
 				}
 			}
@@ -76,16 +68,21 @@
 		.img {
 			margin-bottom: 20px;
 			width: 160px;
+			height: 160px;
+			overflow: hidden;
 
-			&--cover {
-				height: 160px;
-				overflow: hidden;
+			img {
+				width: 100%;
+				height: 100%;
+			}
 
-				img {
-					width: 100%;
-					height: 100%;
-					object-fit: cover;
-				}
+			&--cover img {
+				object-fit: cover;
+			}
+
+			&--contain img {
+				object-fit: contain;
+				object-position: top center;
 			}
 		}
 
@@ -105,4 +102,11 @@
 			}
 		}
 	}
+
+	// If there are more than 3 items; smaller header font size
+	&--max, {		
+		.item h3 {
+			font-size: 28px;
+		}
+	}
 }
\ No newline at end of file

wordpress/wp-content/themes/makeitopen/template-parts/page-builder-rows/items.php

 <?php
 $layout = get_sub_field('layout');
+$background = get_sub_field('background');
+$total_items = count(get_sub_field('items'));
+$amount = ($total_items > 3) ? 'max' : 'min';
 ?>
-<div class="content-row items-row items-row--<?php echo $layout; ?>">
+<div class="content-row items-row items-row--<?php echo $layout; ?> content-row--<?php echo $background; ?> items-row--<?php echo $amount; ?>">
 	<div class="container">
 		<h3><?php the_sub_field('title'); ?></h3>
 		<?php