﻿.section_main {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
        "section_subproducts"
        "section_options"
        "section_articles"
        "section_links"
        "section_searchresult"
    "section_products"; outline: solid 2px white;
}

.section_subproducts {
    grid-area: section_subproducts;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 250px 250px 1fr;
    grid-template-rows: 200px 200px;
    grid-template-areas:
        ". cellProduct1 cellProduct2 ."
        ". cellProduct3 cellProduct4 .";
    grid-gap: 15px;
    margin: auto;
    padding-bottom:50px;
}

.cellCommon {
    border: solid 1px darkgray;
    box-shadow: 0 0 7px #333333, 0 0 1px #333333;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    position: relative;
}


.cellProduct1 {
    grid-area: cellProduct1;
}

.cellProduct2 {
    grid-area: cellProduct2;
}

.cellProduct3 {
    grid-area: cellProduct3;
}

.cellProduct4 {
    grid-area: cellProduct4;
}

.section_products {
    grid-area: section_products;
    padding-bottom: 20px;
}

.section_links
{
    visibility:hidden;
}

.productGroup_granitskaerver_sorte {
    background-image: url('../../images/productimages/productgroups/Granitskaerver_sorte.jpg');
}

.productGroup_granitskaerver_grae {
    background-image: url('../../images/productimages/productgroups/Granitskaerver_grae.jpg');
}

.productGroup_granitskaerver_hvide {
    background-image: url('../../images/productimages/productgroups/Granitskaerver_hvide.jpg');
}

.productGroup_granitskaerver_roede {
    background-image: url('../../images/productimages/productgroups/Granitskaerver_roede.jpg');
}



@media screen and (max-width: 600px) {


    .section_subproducts {
        grid-area: section_subproducts;
        width: 100%;
        max-width: 800px;
        display: grid;
        grid-template-columns: 1fr 250px 1fr;
        grid-template-rows: 250px 250px 250px 250px;
        grid-template-areas:
            ". cellProduct1 ."
            ". cellProduct2 ."
            ". cellProduct3 ."
            ". cellProduct4 .";
        grid-gap: 15px;
        margin: auto;
        padding: 10px;
        border-radius: 5px;
    }
}