/**
 * Progressive Width Breakpoints for WCS
 * 
 * Extends Bootstrap 4 container widths for larger screens.
 * Container width increases proportionally at each breakpoint
 * to make better use of screen real estate.
 * 
 * Standard Bootstrap 4 stops at:
 *   @media (min-width: 1200px) { .container { max-width: 1140px; } }
 * 
 * This file extends for:
 *   1400px, 1600px, 1920px, 2560px, 3840px, 5120px
 */

/* 1400px viewport - 1320px container */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* 1600px viewport - 1480px container */
@media (min-width: 1600px) {
  .container {
    max-width: 1480px;
  }
}

/* 1920px (Full HD) viewport - 1700px container */
@media (min-width: 1920px) {
  .container {
    max-width: 1700px;
  }
}

/* 2560px (QHD/1440p) viewport - 2000px container */
@media (min-width: 2560px) {
  .container {
    max-width: 2000px;
  }
}

/* 3840px (4K) viewport - 2400px container */
@media (min-width: 3840px) {
  .container {
    max-width: 2400px;
  }
}

/* 5120px (Ultrawide/5K) viewport - 2800px container */
@media (min-width: 5120px) {
  .container {
    max-width: 2800px;
  }
}