/* 
   Standard Responsive Breakpoints
   Small (sm): ≥576px
   Medium (md): ≥768px
   Large (lg): ≥992px
   Extra large (xl): ≥1200px
   Extra extra large (xxl): ≥1400px
*/

/* --- Small devices (sm) --- */
@media (min-width: 576px) {
    /* Styles for 576px and up */
}

/* --- Medium devices (md) --- */
@media (min-width: 768px) {
    /* Styles for 768px and up */
}

/* --- Large devices (lg) --- */
@media (min-width: 992px) {
    /* Styles for 992px and up */
}

/* --- Extra large devices (xl) --- */
@media (min-width: 1200px) {
    /* Styles for 1200px and up */
}

/* --- Extra extra large devices (xxl) --- */
@media (min-width: 1400px) {
    /* Styles for 1400px and up */
}

/* Utility Classes */
.d-sm-none { @media (min-width: 576px) { display: none !important; } }
.d-md-none { @media (min-width: 768px) { display: none !important; } }
.d-lg-none { @media (min-width: 992px) { display: none !important; } }
.d-xl-none { @media (min-width: 1200px) { display: none !important; } }
.d-xxl-none { @media (min-width: 1400px) { display: none !important; } }

.d-block-sm { display: none; @media (min-width: 576px) { display: block !important; } }
.d-block-md { display: none; @media (min-width: 768px) { display: block !important; } }
.d-block-lg { display: none; @media (min-width: 992px) { display: block !important; } }
.d-block-xl { display: none; @media (min-width: 1200px) { display: block !important; } }
.d-block-xxl { display: none; @media (min-width: 1400px) { display: block !important; } }