/* Dynamic grid component */

.ha-news-grid {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 940px;
    margin: auto;
    padding: 18px 0 0 18px; /* must be same as the item's border-width */

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

    .ha-news-grid__item {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        border: 0 solid transparent;
        border-width: 0 18px 18px 0; /* must be same as the parent's padding */
        width: calc(33.3%); /* 3 columns */
    }

    @media (max-width: 740px) {
    .ha-news-grid__item {
        width: calc(49.9%); /* 2 columns */
    }
    }

    @media (max-width: 500px) {
    .ha-news-grid__item {
        width: calc(100%); /* 1 columns */
    }
    }