Custom Loop

Hi Guys

I am new to WP but I have had a go at creating a custom loop, but I am struggling a bit.

I will try my best to explain what I am wanting to do.

On my homepage I am wanting to display the courses (posts).

I have a layout like:

<div class=”featured”>1st post info here</div>

<div class=”row”>
<div class=”course”>2nd post info here</div>
<div class=”course”>3rd post info here</div>
<div class=”course”>4th post info here</div>
</div>

<div class=”featured”>5th post info here</div>

<div class=”row”>
<div class=”course”>6th post info here</div>
<div class=”course”>7th post info here</div>
<div class=”course”>8th post info here</div>
</div>

and so on. So the first and then 4 after that will have a div with a class of ‘featured’, then the collection of 3 will be wrapped in a .wrapper class container.

I have probably picked a ridiculously difficult one for my first go. I have had a go and this is what I have:

<?php

  // The Query
  $args=array(
	 'post_type' => 'post',
	'post_status' => 'publish',
	'category_name' =>'course'
  );

$the_query = new WP_Query( $args );

?>

<?php
// The Loop
	if ( $the_query->have_posts() ) :
		$count = -1;
		 while ( $the_query->have_posts() ) : $the_query->the_post();
		 $count++;
?>

<?php	if ( $count == 0) {
	             echo "<h1 style='background: yellow;'>";  the_title();  echo "</h1>";
	        } elseif ( $count%4 == 0) {
		     echo "<h1 style='background: yellow;'>";  the_title();  echo "</h1>";
		} else {
		     echo "<div class='wrapper'>";
		     echo "<h2 style='background: green;'>"; the_title();  echo "</h2>";
		     echo "</div>";
		}
?>

<?php endwhile;
   wp_reset_postdata();
endif;	?>

The result is that the first and then every 4th I can target but the collection of 3 posts that I want wrapped in a .wrapper are each in a wrapper (I can see why this is happening but not sure how to fix it).

I hope this makes sense