@charset "UTF-8";

  
  

  .grid {
    display: grid;
    grid-template-columns: repeat(6, 200px);
    grid-auto-rows: 200px;
    grid-gap: 5px;
  }

  .grid1x1 img {    width: 200px;    height: 200px;    }
  .grid2x2 img {    width: 405px;    height: 405px;    }
  .grid3x3 img {    width: 610px;    height: 610px;    }
  .grid4x4 img {    width: 815px;    height: 815px;    }
  .grid5x5 img {    width: 1020px;    height: 1020px;    }
  .grid6x6 img {    width: 1225px;    height: 1225px;    }

  .grid2x3 img {    width: 405px;    height: 610px;    }
  .grid3x2 img {    width: 610px;    height: 405px;    }
  .grid3x4 img {    width: 610px;    height: 815px;    }
  .grid3x5 img {    width: 610px;    height: 1020px;    }
  .grid4x3 img {    width: 815px;    height: 610px;    }
  .grid4x5 img {    width: 815px;    height: 1020px;    }
  .grid5x3 img {    width: 1020px;    height: 610px;    }
  .grid5x4 img {    width: 1020px;    height: 815px;    }


  .grid2x2 {        grid-column: span 2;    grid-row: span 2;         }
  .grid3x3 {        grid-column: span 3;    grid-row: span 3;         }
  .grid4x4 {        grid-column: span 4;    grid-row: span 4;         }
  .grid5x5 {        grid-column: span 5;    grid-row: span 5;         }
  .grid6x6 {        grid-column: span 6;    grid-row: span 6;         }

  .grid2x3 {        grid-column: span 2;    grid-row: span 3;         }
  .grid3x2 {        grid-column: span 3;    grid-row: span 2;         }
  .grid3x4 {        grid-column: span 3;    grid-row: span 4;         }
  .grid3x5 {        grid-column: span 3;    grid-row: span 5;         }
  .grid4x3 {        grid-column: span 4;    grid-row: span 3;         }
  .grid4x5 {        grid-column: span 4;    grid-row: span 5;         }
  .grid5x3 {        grid-column: span 5;    grid-row: span 3;         }
  .grid5x4 {        grid-column: span 5;    grid-row: span 4;         }


  /* for styling purpose only */
  .grid > div {
    /*background-color: red;*/

    /*margin: auto;*/

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /*=======================================*/
  /*             MOBILE DEVICES            */
  /*=======================================*/

  @media (max-width: 600px) {
    .grid {
      display: grid;
      grid-template-columns: repeat(6, 57px);
      grid-auto-rows: 57px;
      grid-gap: 5px;
    }

    .grid1x1 img {    width: 57px;    height: 57px;    }
    .grid2x2 img {    width: 119px;    height: 119px;    }
    .grid3x3 img {    width: 181px;    height: 181px;    }
    .grid4x4 img {    width: 243px;    height: 243px;    }
    .grid5x5 img {    width: 305px;    height: 305px;    }
    .grid6x6 img {    width: 367px;    height: 367px;    }

    .grid2x3 img {    width: 119px;    height: 181px;    }
    .grid3x2 img {    width: 181px;    height: 119px;    }
    .grid3x4 img {    width: 181px;    height: 243px;    }
    .grid3x5 img {    width: 181px;    height: 305px;    }
    .grid4x3 img {    width: 243px;    height: 181px;    }
    .grid4x5 img {    width: 243px;    height: 305px;    }
    .grid5x3 img {    width: 305px;    height: 181px;    }
    .grid5x4 img {    width: 305px;    height: 243px;    }


  }


  /*=========================*/
  /*   PLAY BUTTON OVERLAY   */
  /*=========================*/

  .playButtonParent {
    position: relative;
    top: 0;
    left: 0;
  }
  .playButtonImageA {
    position: relative;
    top: 0;
    left: 0;
  }
  .playButtonImageB {
    position: absolute;
    top: 0px;
    left: 0px;
  }