/*
 * Vignettes: width: [230px - 350px]
 *   - 2 columns: 480px+
 *   - 3 columns: 768px+
 *   - 4 columns: 1024px+
 * 
 * iPhone: 
 *  - portrait: 320px: 1 column
 *  - landscape: 480px: 2 columns
 * iPad:
 *  - portrait: 768px: 3 columns
 *  - landscape: 1024px: 4 columns
 *
 */

@media all and (max-width: 1023px) {
  .vignette {
    width: 33% !important;
    padding-top: 33% !important;
  }
}

@media all and (max-width: 767px) {
  .vignette {
    width: 50% !important;
    padding-top: 50% !important;
  }
}

@media all and (max-width: 479px) {
  .vignette {
    width: 100% !important;
    padding-top:100% !important;
  }
}