/*
 * style.css
 * Custom CSS for fractional Bootstrap-like columns.
 * Link this file AFTER Bootstrap's CSS in your HTML.
 */

/* ==========================================================================
   Base (Extra Small - xs) Breakpoint: <576px
   These styles apply to all screen sizes unless overridden by larger breakpoints.
   ========================================================================== */

.col-0-5 { flex: 0 0 auto; width: calc(100% / 24); } /* 0.5 / 12 = 1 / 24 */
.col-1-5 { flex: 0 0 auto; width: calc(100% / 8); }  /* 1.5 / 12 = 1 / 8 */
.col-2-5 { flex: 0 0 auto; width: calc(100% * 5 / 24); } /* 2.5 / 12 = 5 / 24 */
.col-3-5 { flex: 0 0 auto; width: calc(100% * 7 / 24); } /* 3.5 / 12 = 7 / 24 */
.col-4-5 { flex: 0 0 auto; width: calc(100% * 3 / 8); }  /* 4.5 / 12 = 3 / 8 */
.col-5-5 { flex: 0 0 auto; width: calc(100% * 11 / 24); } /* 5.5 / 12 = 11 / 24 */
.col-6-5 { flex: 0 0 auto; width: calc(100% * 13 / 24); } /* 6.5 / 12 = 13 / 24 */
.col-7-5 { flex: 0 0 auto; width: calc(100% * 5 / 8); }  /* 7.5 / 12 = 5 / 8 */
.col-8-5 { flex: 0 0 auto; width: calc(100% * 17 / 24); } /* 8.5 / 12 = 17 / 24 */
.col-9-5 { flex: 0 0 auto; width: calc(100% * 19 / 24); } /* 9.5 / 12 = 19 / 24 */
.col-10-5 { flex: 0 0 auto; width: calc(100% * 7 / 8); } /* 10.5 / 12 = 7 / 8 */
.col-11-5 { flex: 0 0 auto; width: calc(100% * 23 / 24); } /* 11.5 / 12 = 23 / 24 */


/* ==========================================================================
   Small (sm) Breakpoint: ≥576px
   ========================================================================== */
@media (min-width: 576px) {
    .col-sm-0-5 { flex: 0 0 auto; width: calc(100% / 24); }
    .col-sm-1-5 { flex: 0 0 auto; width: calc(100% / 8); }
    .col-sm-2-5 { flex: 0 0 auto; width: calc(100% * 5 / 24); }
    .col-sm-3-5 { flex: 0 0 auto; width: calc(100% * 7 / 24); }
    .col-sm-4-5 { flex: 0 0 auto; width: calc(100% * 3 / 8); }
    .col-sm-5-5 { flex: 0 0 auto; width: calc(100% * 11 / 24); }
    .col-sm-6-5 { flex: 0 0 auto; width: calc(100% * 13 / 24); }
    .col-sm-7-5 { flex: 0 0 auto; width: calc(100% * 5 / 8); }
    .col-sm-8-5 { flex: 0 0 auto; width: calc(100% * 17 / 24); }
    .col-sm-9-5 { flex: 0 0 auto; width: calc(100% * 19 / 24); }
    .col-sm-10-5 { flex: 0 0 auto; width: calc(100% * 7 / 8); }
    .col-sm-11-5 { flex: 0 0 auto; width: calc(100% * 23 / 24); }
}

/* ==========================================================================
   Medium (md) Breakpoint: ≥768px
   ========================================================================== */
@media (min-width: 768px) {
    .col-md-0-5 { flex: 0 0 auto; width: calc(100% / 24); }
    .col-md-1-5 { flex: 0 0 auto; width: calc(100% / 8); }
    .col-md-2-5 { flex: 0 0 auto; width: calc(100% * 5 / 24); }
    .col-md-3-5 { flex: 0 0 auto; width: calc(100% * 7 / 24); }
    .col-md-4-5 { flex: 0 0 auto; width: calc(100% * 3 / 8); }
    .col-md-5-5 { flex: 0 0 auto; width: calc(100% * 11 / 24); }
    .col-md-6-5 { flex: 0 0 auto; width: calc(100% * 13 / 24); }
    .col-md-7-5 { flex: 0 0 auto; width: calc(100% * 5 / 8); }
    .col-md-8-5 { flex: 0 0 auto; width: calc(100% * 17 / 24); }
    .col-md-9-5 { flex: 0 0 auto; width: calc(100% * 19 / 24); }
    .col-md-10-5 { flex: 0 0 auto; width: calc(100% * 7 / 8); }
    .col-md-11-5 { flex: 0 0 auto; width: calc(100% * 23 / 24); }
}

/* ==========================================================================
   Large (lg) Breakpoint: ≥992px
   ========================================================================== */
@media (min-width: 992px) {
    .col-lg-0-5 { flex: 0 0 auto; width: calc(100% / 24); }
    .col-lg-1-5 { flex: 0 0 auto; width: calc(100% / 8); }
    .col-lg-2-5 { flex: 0 0 auto; width: calc(100% * 5 / 24); }
    .col-lg-3-5 { flex: 0 0 auto; width: calc(100% * 7 / 24); }
    .col-lg-4-5 { flex: 0 0 auto; width: calc(100% * 3 / 8); }
    .col-lg-5-5 { flex: 0 0 auto; width: calc(100% * 11 / 24); }
    .col-lg-6-5 { flex: 0 0 auto; width: calc(100% * 13 / 24); }
    .col-lg-7-5 { flex: 0 0 auto; width: calc(100% * 5 / 8); }
    .col-lg-8-5 { flex: 0 0 auto; width: calc(100% * 17 / 24); }
    .col-lg-9-5 { flex: 0 0 auto; width: calc(100% * 19 / 24); }
    .col-lg-10-5 { flex: 0 0 auto; width: calc(100% * 7 / 8); }
    .col-lg-11-5 { flex: 0 0 auto; width: calc(100% * 23 / 24); }
}

/* ==========================================================================
   Extra Large (xl) Breakpoint: ≥1200px
   ========================================================================== */
@media (min-width: 1200px) {
    .col-xl-0-5 { flex: 0 0 auto; width: calc(100% / 24); }
    .col-xl-1-5 { flex: 0 0 auto; width: calc(100% / 8); }
    .col-xl-2-5 { flex: 0 0 auto; width: calc(100% * 5 / 24); }
    .col-xl-3-5 { flex: 0 0 auto; width: calc(100% * 7 / 24); }
    .col-xl-4-5 { flex: 0 0 auto; width: calc(100% * 3 / 8); }
    .col-xl-5-5 { flex: 0 0 auto; width: calc(100% * 11 / 24); }
    .col-xl-6-5 { flex: 0 0 auto; width: calc(100% * 13 / 24); }
    .col-xl-7-5 { flex: 0 0 auto; width: calc(100% * 5 / 8); }
    .col-xl-8-5 { flex: 0 0 auto; width: calc(100% * 17 / 24); }
    .col-xl-9-5 { flex: 0 0 auto; width: calc(100% * 19 / 24); }
    .col-xl-10-5 { flex: 0 0 auto; width: calc(100% * 7 / 8); }
    .col-xl-11-5 { flex: 0 0 auto; width: calc(100% * 23 / 24); }
}

/* ==========================================================================
   Extra Extra Large (xxl) Breakpoint: ≥1400px
   ========================================================================== */
@media (min-width: 1400px) {
    .col-xxl-0-5 { flex: 0 0 auto; width: calc(100% / 24); }
    .col-xxl-1-5 { flex: 0 0 auto; width: calc(100% / 8); }
    .col-xxl-2-5 { flex: 0 0 auto; width: calc(100% * 5 / 24); }
    .col-xxl-3-5 { flex: 0 0 auto; width: calc(100% * 7 / 24); }
    .col-xxl-4-5 { flex: 0 0 auto; width: calc(100% * 3 / 8); }
    .col-xxl-5-5 { flex: 0 0 auto; width: calc(100% * 11 / 24); }
    .col-xxl-6-5 { flex: 0 0 auto; width: calc(100% * 13 / 24); }
    .col-xxl-7-5 { flex: 0 0 auto; width: calc(100% * 5 / 8); }
    .col-xxl-8-5 { flex: 0 0 auto; width: calc(100% * 17 / 24); }
    .col-xxl-9-5 { flex: 0 0 auto; width: calc(100% * 19 / 24); }
    .col-xxl-10-5 { flex: 0 0 auto; width: calc(100% * 7 / 8); }
    .col-xxl-11-5 { flex: 0 0 auto; width: calc(100% * 23 / 24); }
}