<section class="projects-home-row">
    <div class="first-column project-column">
        @for($i = 0; $i <=3; $i++)
            <?php
            if(isset($projects[$i])){
            $project = $projects[$i]; ?>
            <article class="project home" style="background-image: url('{{$project->small_image_url}}');"
                     id="home-project-{{$project->position_home}}">
                <a class="overlay" href="/{{$project->route}}">
                    <p>{{$project->name}}</p>

                    <div class="overlay-color"></div>
                </a>
            </article>
            <?php } ?>
        @endfor
    </div>


    <div class="second-column project-column">
        @for($i = 4; $i <=7; $i++)
            @if($i ==7)
                <a href="/contact" class="coffee-home">Ko<span>ff</span>ie<em>?</em></a>
            @endif
            <?php
            if(isset($projects[$i])){
            $project = $projects[$i]; ?>
            <article class="project home" style="background-image: url('{{$project->small_image_url}}');"
                     id="home-project-{{$project->position_home}}">
                <a class="overlay" href="/{{$project->route}}">
                    <p>{{$project->name}}</p>

                    <div class="overlay-color"></div>
                </a>
            </article>
            <?php } ?>
        @endfor
    </div>

    <div class="third-column project-column">
        @for($i = 8; $i <12; $i++)
            <?php
            if(isset($projects[$i])){
            $project = $projects[$i]; ?>
            <article class="project home" style="background-image: url('{{$project->small_image_url}}');"
                     id="home-project-{{$project->position_home}}">
                <a class="overlay" href="/{{$project->route}}">
                    <p>{{$project->name}}</p>

                    <div class="overlay-color"></div>
                </a>
            </article>
            <?php } ?>
        @endfor
    </div>


    <div class="mobile-column">
        <div class="left-column">
            @foreach($projects as $project)
                @if(in_array($project->position_home, [2,5,8,12]))
                    <article class="project home">
                        <a class="overlay" href="/{{$project->route}}">
                            <p>{{$project->name}}</p>

                            <div class="overlay-color"></div>
                        </a>
                        <img alt="{{$project->name}}" src="{{$project->small_image_url}}"/>
                    </article>
                @endif
            @endforeach
        </div>
        <div class="right-column">
            @foreach($projects as $project)
                @if(in_array($project->position_home, [3,7,10]))
                    <article class="project home">
                        <a class="overlay" href="/{{$project->route}}">
                            <p>{{$project->name}}</p>

                            <div class="overlay-color"></div>
                        </a>
                        <img alt="{{$project->name}}" src="{{$project->small_image_url}}"/>
                    </article>
                @endif
            @endforeach
        </div>
    </div>

    <div class="clear"></div>

</section>