/*
 * Lightbox Stylesheet for grid layout
 *    Basis: lightbox.base.light.css
 *    Addon: lightbox.grid.10plus.addon.css
 * 
 *    This stylesheet contains narrower previews
 *    thus fitting more of them into a screen
 */



/* DYNAMIC PART OF THE GRID */

/* Phone portrait (DEFAULT, 3-grid) */
#myPreviews {
  grid-gap: .75vw;                                            /* screen size dependent */
  grid-template-columns: repeat(3, 32vw);                     /* Master for grid size. Grid size = grid container width / amount columns - (amount colums - 1) * grid-gap - any preferred value for border margin */
}

#myPreviews > div {
  height: 32vw;                                               /* height keep same as grid size */
}

#myPreviews > div.vertical,                                   /* 1x2 */ 
#myPreviews > div.bigsquare {
  height: calc(2 * 32vw + 1 * .75vw);                         /* max-height = amount grid-row-span * width of grid cell + (amount grid-row-span - 1) * grid-gap */
                                                              /* Defining this precisely prevents large vertical images from destroying layoutand ensures smaller images */
                                                              /* will stretch to the given height. This seems is a workaround for the grid behaviour */
}

/* Phone landscape (5-grid) */
@media only screen and (orientation: landscape) {

  #myPreviews {
    grid-gap: .5vw;
    grid-template-columns: repeat(5, 19vw);
  }

  #myPreviews > div {
    height: 19vw;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 19vw + 1 * .5vw);
  }

}

/* Tablets portrait (4-grid) */
@media only screen and (orientation: portrait) and (min-width: 430px) {

  #myPreviews {
    grid-gap: .5vw;
    grid-template-columns: repeat(4, 24vw);
  }

  #myPreviews > div {
    height: 24vw;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 24vw + 1 * .5vw);
  }

}

/* Tablets portrait (5-grid) */
@media only screen and (orientation: portrait) and (min-width: 600px) {

  #myPreviews {
    grid-gap: .4vw;
    grid-template-columns: repeat(5, 19vw);
  }

  #myPreviews > div {
    height: 19vw;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 19vw + 1 * .4vw);
  }

}

/* Generic for all bigger screens (portrait + landscape) (6-grid) */
@media only screen and (min-width: 700px) {

  #myPreviews {
    grid-gap: .35vw;
    grid-template-columns: repeat(6, 16vw);
  }

  #myPreviews > div {
    height: 16vw;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 16vw + 1 * .35vw);
  } 

}

/* (7-grid) */
@media only screen and (min-width: 900px) {

  #myPreviews {
    grid-gap: .25vw;
    grid-template-columns: repeat(7, 14vw);
  }

  #myPreviews > div {
    height: 14vw;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 14vw + 1 * .25vw);
  } 

}

/* (7-grid with max width in pixel) */
@media only screen and (min-width: 1100px) {

  #myPreviews {
    grid-gap: 2px;
    grid-template-columns: repeat(7, 154px);
    margin-left: auto;                                        /* justify content center seems not to have an effect, center with auto-margin left/right instead */
    margin-right: auto;                                       /* justify content center seems not to have an effect, center with auto-margin left/right instead */
    width: 1100px;
  }

  #myPreviews > div {
    height: 154px;
  }

  #myPreviews > div.vertical,
  #myPreviews > div.bigsquare {
    height: calc(2 * 154px + 1 * 2px);
  }

}