@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }
  
    * {
        margin: 0;
        padding: 0;
    }
  
    body {
        line-height: 1.5;
    }
  
    img, picture, video, canvas, svg {
        display: inline-block;  /* or block, to avoid that weird extra vertical space */
        max-inline-size: 100%;  /* based on the direction of the text, like max-width if text is horiszontal */
    }
  
    input, button, textarea, select {
        /* Form */
        font: inherit;
        letter-spacing: inherit;
        word-spacing: inherit;
        color: currentColor;
    }
  
    h1, h2, h3, h4, h5, h6 {
        /* Let the browser be allowed to break lines with long words, if they overflow the container */
        overflow-wrap: break-word;
        /* try to balance the number of characters on each line */
        text-wrap: balance;
    }
  
    ol, ul {
        list-style: none;
    }
  
    :not([class]) {
        /* no class */
        h1&, h2&, h3&, h4&, h5&, h6& {
            margin-block: 0.75em;
            line-height: 1.25;
            text-wrap: balance;
            letter-spacing: -0.05ch;
        }
    
        p&, ol&, ul& {
            margin-block: 1em;
        }
    
        ol&, ul& {
            padding-inline-start: 1.5em;
            list-style: revert;     /* back the default list marker if no class */
        }
    
        li& {
            margin-block: 0.5em;
        }
    }
}