Loop through categories in a taxonomy and display the output

loop-through-categories.css

.taxonomy-container {
  width: 100%;
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
}

.taxonomy-div {
  width: 33.33%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
}

.taxonomy-inner {
  width: 100%;  
  background-color: #fff;
  border-radius: 8px;
  flex-direction: row;
  display: flex;
  padding: 8px;
}

.taxonomy-left {
  width: 40%;
}

.taxonomy-right {
  width: 60%;
  padding-left: 16px;
}

.taxonomy-image {
  width: 100%;
}

.taxonomy-title {
  font-size: 16px;
}

.taxonomy-link {
  color: red;
}

.taxonomy-link:hover {
  color: grey;
}

@media only screen and (max-width: 992px){
  .taxonomy-div {
    width: 50%;
  }
}

@media only screen and (max-width: 480px){
  .taxonomy-div {
    width: 100%;
  }
}

loop-through-categories.php

<?php

// SET WHICH TAXONOMY YOU WANT TO GET THE TERMS FOR:
$taxonomy = "category";

// SET THE NAME OF YOUR ACF IMAGE FIELD. ENSURE THE FIELD IS SET TO RETURN THE IMAGE URL AND NOT THE ARRAY
$acf_image_field = "image";

$terms = get_terms( array(
    'taxonomy' => $taxonomy,
    'hide_empty' => true,
) );

if ($terms) {
  
  // parent div
  
  ?>
  
  <div class="taxonomy-container">

  <?php  
    
  foreach ($terms as $term) {

	$name = $term->name;
    $image =  get_field($acf_image_field ,$term->taxonomy.'_'.$term->term_id);
    $url = get_term_link( $term );
    
    ?>
    
    <div class="taxonomy-div">
        <div class="taxonomy-inner">
            <div class="taxonomy-left">
              <img class="taxonomy-image" src="<?php echo $image;?>" />
          </div>
          <div class="taxonomy-right">
            <h2 class="taxonomy-title"><?php echo $name; ?></h2>
            <a class="taxonomy-link" href="<?php echo $url; ?>">View More</a>
          </div>
        </div>
    </div>

    <?php
    
  }
 
  ?>
    
  </div>

  <?php
 
}

?>