<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('partials/head'); %>
</head>
<body>
    <header>
       <%- include('partials/header'); %>
    </header>

    <div class="allProductsDIV">
        <% for(var i=0; i < products.length; i++) { var prod = products[i]; %>

            <div class="productDIV">
                <h4><%=prod.name %></h4>
                <div class="productImage">
                    <img src="<%= prod.src %>">
                </div>
                <div class="productInfo"><%=prod.desc %></div>
            </div>

        <% } %>
    </div>
</body>
</html>

<style type="text/css">
    .productDIV > img {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .productDIV > .productImage {
        width: calc(50% - 15px);
        height: calc(100% - 120px);
        position: absolute;
        background-color: red;
        left: 10px;
        bottom: 10px;
    }
    .productDIV > .productInfo {
        width: calc(50% - 15px);
        height: calc(100% - 120px);
        position: absolute;
        overflow-y: hidden;
        background-color: blue;
        right: 10px;
        bottom: 10px;
    }
    .productDIV > h4 {
        padding: 0px;
        margin: 0px;
    }
    .productDIV {
        font-size: 16px;
        margin: 10px;
        padding: 5px;
        display: inline-block;
        background-color: white;

        border-style: solid;
        border-width: 2px;

        position: relative;

        height: 250px;
    } 



    .allProductsDIV {
        font-size: 0;
        margin: 0px;
        width: calc(80% - 20px);
        left: 10%;
        position: absolute;
        height: 100%;
        padding: 10px;
        background-color: white;

        display: grid;
    }

    @media (max-width: 400px) {
        .allProductsDIV {
            grid-template-columns: 1fr;
        }
    }
    @media (min-width: 800px) {
        .allProductsDIV {
            grid-template-columns: 1fr 1fr;
        }
    }
    @media (min-width: 1200px) {
        .allProductsDIV {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
</style>