section.productList
{
    border: solid 1px #FFF;
    /*width: calc(100% - 2px);*/ padding:0 0 0 0;
    margin: 0;
    font-size:0; background-color: rgba(255, 255, 255, .75);
}

section.productList article
{
    border:solid 1px #000; width:calc(28rem - 1px); height:16.5rem; padding:1em 0.5em 0.5em 0.5em;
    vertical-align: top; font-size:1rem;
    background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url("/resources/img/test.svg");
    background-repeat: no-repeat;
    background-size: 100%;
}

section.productList article h3 {text-align: center;}

section.productList article div{margin: 0; padding: 0;}

section.productList article p {margin: 0; padding: 0;}

@media only screen and (max-width: 491px)/*320x200*/
{
    /*
    section.productList article
    {
        display:block;
        width:95vw; height:calc(95vw * 0.75); border:solid 1px #000; padding:1em 0.5em 0.5em 0.5em;
    }
    */
}

@media only screen and (min-width: 492px)
{
    /*
    section.productList article
    {
        display:block;
        width:calc(28rem - 1px); height:16.5rem; border:solid 1px #000; padding:1em 0.5em 0.5em 0.5em;
        margin:.5em; margin-left: calc(calc(100% - 28rem) / 2);
        vertical-align: top; font-size:1rem;
        background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url("/resources/img/test.svg");
        background-repeat: no-repeat;
        background-size: 100%;
    }
     */
}

@media only screen and (min-width: 1023px)
{
    /*
    section.productList article
    {
        / *display: inline-block;* /
        margin:.5em;
    }
    
    section.productList article:nth-child(2n+1)
    {
        margin-left:calc(calc(100% - 59rem) / 2);/ *2x28+1* /
    }
    */
}

@media only screen and (min-width: 1532px) 
{
    section.productList
    {
        padding: 0;
        /*width: calc(calc(3 * calc(28rem + 2px)) + 50px);*/
        border: solid 1px rgba(255, 255, 255, 0);
        /*width: calc(3 * calc(30rem + 2px));*/
        padding-left: calc(calc(100vw - calc(3 * calc(30rem + 2px))) /2);
        /*width: calc(100vw / 2);*/
    }

    section.productList article
    {
        display: inline-block;
        border: solid 1px #FFF;
        width: 28rem;
        margin:.5rem .5rem .5rem .5rem;
    }


    section.productList article:nth-child(3n+1){/*margin-left:0;/*margin-left:.5em;*/}
    
    section.productList article:nth-child(3n)
    {
        /*margin-right:0;/*margin-left:calc(calc(100% - 85em) / 2);/*3*28+2*/
    }

}