<div class="linha">
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Artesanato com cipó.jpg" style="max-height:100%;max-width:100%" alt="Artesanato com cipó">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Artesanato com fibra de bananeira - Associação Mulheres de Fibra_editado.jpg" style="max-height:100%;max-width:100%" alt="Artesanato com fibra de bananeira - Associação Mulheres de Fibra">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Castanha de cumbaru.jpg" style="max-height:100%;max-width:100%" alt="Castanha de cumbaru">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Oleo de copaíba_editado.jpg" style="max-height:100%;max-width:100%" alt="Óleo de copaíba">
    </div>
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Mel de abelha nativa sem ferrão com Castanha do Brasil.jpg" style="max-height:100%;max-width:100%" alt="Mel de abelha nativa sem ferrão com Castanha do Brasil">
        <img src="~/Areas/ModuloPublico/Content/img/Home/minicolar com sementes_editada.jpg" style="max-height:100%;max-width:100%" alt="Minicolar com Sementes">
    </div>
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Cesto de buriti.jpg" style="max-height:100%;max-width:100%" alt="Cesto de buriti">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Colar produzido com açaí.jpg" style="max-height:100%;max-width:100%" alt="Colar produzido com açaí">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Guaraná em formato de bastão.jpg" style="max-height:100%;max-width:100%" alt="Guaraná em formato de bastão">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Castanha do Brasil in Natura.jpg" style="max-height:100%;max-width:100%" alt="Castanha do Brasil in Natura">
    </div>
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Pitomba.jpg" style="max-height:100%;max-width:100%" alt="Pitomba">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Biscoito de babaçu.jpg" style="max-height:100%;max-width:100%" alt="Biscoito de babaçu">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Castanha do Brasil coberta com chocolate.jpg" style="max-height:100%;max-width:100%" alt="Castanha do Brasil coberta com chocolate">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Farinha de babaçu aberta.jpg" style="max-height:100%;max-width:100%" alt="Farinha de babaçu aberta">
    </div>
</div>

.linha {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.coluna {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

    .coluna img {
        margin-top: 8px;
        vertical-align: middle;
    }

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .coluna {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .coluna {
        flex: 100%;
        max-width: 100%;
    }