Foreach repeating posts

Hi all,
I duplicated the default post-feed CSS classes into a new set called benefit-feed

.benefit-feed {
    position: relative;
    display: grid;
    gap: 4.8vmin 2vmin;
    grid-template-columns: repeat(8, 1fr); 
    padding: max(4.8vmin, 36px) 0 0;

:is(.tag-template, .author-template) .benefit-feed {
    margin-top: 4vmin;

@media (max-width: 991px) {
    .benefit-feed {
        grid-template-columns: 1fr 1fr;

@media (max-width: 767px) {
    .benefit-feed {
        grid-template-columns: 1fr;
        grid-gap: 40px;

and updated the grid-column-template to display 4 posts rather than the default 3 as in the default post-feed.

I can now show 4 posts with tag ‘home_benefit’ across the page using the following code

<div class="benefit-feed">
                {{#get "posts" filter="tags:home_benefits" as |post|}}
                        {{#foreach post}} 
                            <article class="post-card post" style="background-color:#006990;">
                                <div class="post-card-content">
                                    <header class="post-card-header p20" style="color:white;">
                                        <h2 class="post-card-title">{{title}}</h2>

however, it repeats the posts 4 times e.g.

Any help as to how I can ensure that each post is only retrieved once will be appreciated.

I am running in a local install so not available online


I think you’re accidentally looping through four posts four times Try removing the {{#post}} (and matching close tag) and change it to #foreach posts (note the s) - I think that’ll fix you up.

That solved it!

Thank you very much @Cathy_Sarisky !