@media only screen and (max-width : 480px) {
      /* Smartphone view: 1 tile */

        .wrap
        {
                padding-bottom:0;
        }

        .boxInner
        {
                padding:0;
        }

        .boxInner .titleBox
        {
                opacity:1;
                margin-bottom:0;
                font-size:24px;
                background: rgba(0, 0, 0, 0.5); /* For browsers that do not support gradients */
                background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)); /* Standard syntax */
        }

        .box
        {
                width: 100%;
                padding-bottom: 100%;
        }
}

    @media only screen and (max-width : 650px) and (min-width : 481px) {
      /* Tablet view: 2 tiles */
        .boxMargins
        {
                width:90%;
        }

        .bigBox
        {
                width:100%;
                padding-bottom:50%;
        }

        .box
        {
                width: 50%;
                padding-bottom: 50%;
        }

}

    @media only screen and (max-width : 1050px) and (min-width : 651px) {
      /* Small desktop / ipad view: 3 tiles */

}

    @media only screen and (max-width : 1290px) and (min-width : 1051px) {
      /* Medium desktop: 4 tiles */

}