allowing configuring how many top tasks per row

config/install/localgov_base.settings.yml

@@ -8,3 +8,4 @@ localgov_base_localgov_guides_stacked_heading: FALSE
 localgov_base_localgov_guides_vertical_navigation: TRUE
 localgov_base_mobile_breakpoint_js: '768'
 localgov_base_responsive_wysiwyg_tables: TRUE
+localgov_base_services_top_tasks_per_row: 4

config/schema/localgov_base.schema.yml

@@ -41,3 +41,8 @@ localgov_base.settings:
       label: 'Responsive WYSIWYG tables'
       description: 'Choose whether to make WYSIWYG tables responsive or not.'
       default_value: TRUE
+    localgov_base_services_top_tasks_per_row:
+      type: integer
+      label: 'Top tasks per row'
+      description: 'Number of top tasks to display per row in the Services CTA block (1-4).'
+      default_value: 4

localgov_base.theme

@@ -145,6 +145,26 @@ function localgov_base_form_system_theme_settings_alter(&$form, FormStateInterfa
     '#description'   => t('This will display the guide navigation vertically above the guide.'),
   ];
 
+  // Create a fieldset for Services-related settings.
+  $form['localgov_base_settings']['services_fieldset'] = [
+    '#type' => 'fieldset',
+    '#title' => t('Services Display Settings'),
+    '#description' => t('Control how services are displayed on the site.'),
+  ];
+
+  // Add form element to allow users to choose how many Top Tasks links to show.
+  $form['localgov_base_settings']['services_fieldset']['localgov_base_services_top_tasks_per_row'] = [
+    '#type'          => 'number',
+    '#title'         => t('Number of Top Tasks per row'),
+    '#default_value' => theme_get_setting('localgov_base_services_top_tasks_per_row') ? theme_get_setting('localgov_base_services_top_tasks_per_row') : 4,
+    '#description'   => t('The number of Top Tasks links to show in a row for Service pages and Service Landing pages on desktop (they will automatically be stacked on smaller screens).'),
+    '#min'           => 1,
+    '#max'           => 4,
+  ];
+
+  // Add a custom validation handler for our theme settings.
+  $form['#validate'][] = 'localgov_base_theme_settings_validate';
+
   $form['#validate'][] = 'localgov_base_theme_settings_validate';
 }
 
@@ -400,6 +420,33 @@ function localgov_base_preprocess_block(&$variables): void {
 
 }
 
+/**
+ * Implements hook_preprocess_services_cta_block().
+ */
+function localgov_base_preprocess_services_cta_block(&$variables): void {
+  $top_tasks_per_row = theme_get_setting('localgov_base_services_top_tasks_per_row');
+
+  switch ($top_tasks_per_row) {
+    case 1:
+      $variables['top_task_row_size'] = 'full';
+      break;
+
+    case 2:
+      $variables['top_task_row_size'] = 'one-half';
+      break;
+
+    case 3:
+      $variables['top_task_row_size'] = 'one-third';
+      break;
+
+    case 4:
+    default:
+      $variables['top_task_row_size'] = 'one-quarter';
+      break;
+  }
+
+}
+
 /**
  * Implements hook_preprocess_file_link().
  *

templates/block/services-cta-block.html.twig

@@ -40,7 +40,7 @@
 <nav{{ attributes.addClass(classes).setAttribute('aria-label', 'Section Navigation'|t) }}>
   <ul class="lgd-row service-cta-block__list">
     {% for button in buttons %}
-      <li class="lgd-row__one-third service-cta-block__list-item service-cta-block__list-item--{{ loop.index}}">
+      <li class="lgd-row__{{ top_task_row_size }} service-cta-block__list-item service-cta-block__list-item--{{ loop.index}}">
         <a href="{{ button.url }}" class="service-cta-block__link service-cta-block__link--{{ button.type }}">
           <span class="service-cta-block__link-title">{{ button.title }}</span>
           {% include "@localgov_base/includes/icons/icon.html.twig" with {