#debugger { display: inline-block; position: fixed; bottom: 30px; left: 0; z-index: 999;  }
#debugger summary::before { display: inline-block; background-color: #A20F9B; color: #fff; font-size: 12px; font-weight: 600; padding: 2px 4px; content: '#';  }

/* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║                                       BREAKPOINTS                                             ║ */
/* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */

/* 4XL */
@media (max-width: 1919.98px) {
     #debugger summary::before { content:'4XL'; }
} /* @media -----------------------------------| width < 1920px |-------------------------------------------*/

/* 3XL */
@media (max-width: 1599.98px) {
     #debugger summary::before { content:'3XL'; }
} /* @media -----------------------------------| width < 1600px |-------------------------------------------*/

/* 2XL */
@media (max-width: 1439.98px) {
     #debugger summary::before { content:'2XL'; }
} /* @media -----------------------------------| width < 1440px |-------------------------------------------*/

/* XL */
@media (max-width: 1365.98px) {
    #debugger summary::before { content:'XL'; }    
} /* @media -----------------------------------| width < 1366px |-------------------------------------------*/

/* LG */
@media (max-width: 1279.98px) {
    #debugger summary::before { content:'LG'; }
} /* @media -----------------------------------| width < 1200px |-------------------------------------------*/

/* MD */
@media (max-width: 991.98px) {
     #debugger summary::before { content:'MD'; }
} /* @media -----------------------------------| width < 992px |-------------------------------------------*/

/* SM */
@media (max-width: 767.98px) {
    #debugger summary::before { content:'SM'; }
} /* @media -----------------------------------| width < 768px |-------------------------------------------*/

/* XS */
@media (max-width: 575.98px) and (orientation:landscape) {}
@media (max-width: 575.98px) {
    #debugger summary::before { content:'XS'; }
} /* @media -----------------------------------| width < 576px |-------------------------------------------*/