/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    /* CUSTOM WIDTHS */
    .w-sm-25 { width: 25%!important; }
    .w-sm-33 { width: 33%!important; }
    .w-sm-50 { width: 50%!important; }
    .w-sm-75 { width: 75%!important; }
    .w-sm-100 { width: 100%!important; }

    .grille-input-grid {
        max-width: 100%;
        grid-column-gap: 5px;
    }

    .border-sm-start {
        border-left: 1px solid #dee2e6!important;
    }

    .border-sm-top {
        border-top: 1px solid #dee2e6!important;
    }

    .border-sm-end {
        border-right: 1px solid #dee2e6!important;
    }

    .border-sm-bottom {
        border-bottom: 1px solid #dee2e6!important;
    }

    .border-sm {
        border: 1px solid #dee2e6!important;
    }
    
    .text-sm-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    
    .text-sm-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    
    .text-sm-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    
    .text-sm-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    
    .text-sm-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    
    .text-sm-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    .text-sm-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    
    .text-sm-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    
    .text-sm-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    
    .text-sm-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    
    .text-sm-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    
    .text-sm-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    
    .text-sm-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /* CUSTOM WIDTHS */
    .w-md-25 { width: 25%!important; }
    .w-md-33 { width: 33%!important; }
    .w-md-50 { width: 50%!important; }
    .w-md-75 { width: 75%!important; }
    .w-md-100 { width: 100%!important; }

    .border-md-start {
        border-left: 1px solid #dee2e6!important;
    }

    .border-md-top {
        border-top: 1px solid #dee2e6!important;
    }

    .border-md-end {
        border-right: 1px solid #dee2e6!important;
    }

    .border-md-bottom {
        border-bottom: 1px solid #dee2e6!important;
    }

    .border-md {
        border: 1px solid #dee2e6!important;
    }

    .text-md-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    
    .text-md-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    
    .text-md-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    
    .text-md-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    
    .text-md-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    
    .text-md-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    .text-md-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    
    .text-md-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    
    .text-md-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    
    .text-md-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    
    .text-md-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    
    .text-md-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    
    .text-md-9xl {
        font-size: 8rem;
        line-height: 1;
    }

    .grille-input-grid {
        max-width: 90%;
        grid-column-gap: 10px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* CUSTOM WIDTHS */
    .w-lg-25 { width: 25%!important; }
    .w-lg-33 { width: 33%!important; }
    .w-lg-50 { width: 50%!important; }
    .w-lg-75 { width: 75%!important; }
    .w-lg-100 { width: 100%!important; }

    .border-lg-start {
        border-left: 1px solid #dee2e6!important;
    }

    .border-lg-top {
        border-top: 1px solid #dee2e6!important;
    }

    .border-lg-end {
        border-right: 1px solid #dee2e6!important;
    }

    .border-lg-bottom {
        border-bottom: 1px solid #dee2e6!important;
    }

    .border-lg {
        border: 1px solid #dee2e6!important;
    }

    .text-lg-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    
    .text-lg-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    
    .text-lg-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    
    .text-lg-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    
    .text-lg-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    
    .text-lg-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    .text-lg-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    
    .text-lg-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    
    .text-lg-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    
    .text-lg-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    
    .text-lg-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    
    .text-lg-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    
    .text-lg-9xl {
        font-size: 8rem;
        line-height: 1;
    }

    .grille-input-grid {
        max-width: 80%;
        grid-column-gap: 15px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* CUSTOM WIDTHS */
    .w-xl-25 { width: 25%!important; }
    .w-xl-33 { width: 33%!important; }
    .w-xl-50 { width: 50%!important; }
    .w-xl-75 { width: 75%!important; }
    .w-xl-100 { width: 100%!important; }

    .border-xl-start {
        border-left: 1px solid #dee2e6!important;
    }

    .border-xl-top {
        border-top: 1px solid #dee2e6!important;
    }

    .border-xl-end {
        border-right: 1px solid #dee2e6!important;
    }

    .border-xl-bottom {
        border-bottom: 1px solid #dee2e6!important;
    }

    .border-xl {
        border: 1px solid #dee2e6!important;
    }

    .text-xl-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    
    .text-xl-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    
    .text-xl-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    
    .text-xl-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    
    .text-xl-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    
    .text-xl-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    .text-xl-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    
    .text-xl-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    
    .text-xl-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    
    .text-xl-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    
    .text-xl-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    
    .text-xl-8xl {
        font-size: 6rem;
        line-height: 1;
    }
    
    .text-xl-9xl {
        font-size: 8rem;
        line-height: 1;
    }
}