/* =================
   NAVIGATION BLOCKS
   ==================  */


.navigation-blocks {
  display: grid; 
  gap: var(--spacing__sm);
  grid-template-columns: 1fr 1fr; }
  
.navigation-block {
  min-width: 0;
  background: var(--color__gray__05);
  border-radius: var(--border-radius);
  padding: var(--spacing__md); } 

.navigation-block__icon,
.navigation-block__heading {
  margin-bottom: var(--spacing__sm); }

.navigation-block__description {
  margin-bottom: var(--spacing__md); }
  

.navigation-block__icon .icon {
  margin: 0 auto;
  display: block; }
  
.navigation-block h3 {
  font-size: 3rem; }  
  
  
  
@media (max-width: 800px) {
  
  .navigation-blocks {
    grid-template-columns: 1fr; }
    
} 


 
/*
  <div class="navigation-blocks">

<?php
  foreach($navigation_blocks as $navigation_block) :

  $icon			= $navigation_block['icon'];
  $heading		= $navigation_block['heading'];
  $description	= $navigation_block['description'];
  $link			= $navigation_block['link'];
  
  
  if ($icon) {
    $icon_HTML = '<img src="' . esc_url(ICON_DIR_90_GRAY . $icon) . '.svg" alt="' . esc_attr($heading) . ' icon">';
  } else {
    $icon_HTML = '<img src="' . esc_url(ICON_DIR_90_GRAY . 'approval.svg') . '" alt="' . esc_attr($heading) . ' icon">';
  }
?>
  <div class="navigation-block">
    
    <div class="navigation-block__icon">
      <?php echo $icon_HTML ?>
    </div>
    <div class="navigation-block__heading">
      <h3><?php echo $heading ?></h3>
    </div>
    <div class="navigation
    
    */