/*
 * BEM NAMING CONVENTION: https://en.bem.info/methodology/naming-convention/
 * Practical example: http://getbem.com/naming/ (warning: not the right naming convention)
 *
 * block-name__elem-name_mod-name_mod-val
 *
 * BLOCK: The block name defines the namespace (ex: block-name)
 * ELEMENT: Parts of a block and have no standalone meaning (it is tied to block) (ex: block-name__elem-name)
 * MODIFIER: Flags on blocks or elements. Use them to change appearance, behavior or state. (ex: )
 *
 * GOOD BEHAVIOUR USE: https://en.bem.info/methodology/css/#how-to-switch-to-bem-style-css
 *
 * AVOID SIDE EFFECT FROM LEGACY CODE: Use prefixes in names of CSS classes (such as bem-) in order to differentiate the new code from the old code.
 * CSS rule have to be inside a fold code
 */

/*
 * MEDIA QUERIES:
 * THOUGHT: https://stackoverflow.com/questions/37968973/how-to-structure-css-using-bem-methodology-for-adaptive-web-pages
 * Repetitions of the same rule, like @media (max-width: 850px), will be serialized and interpreted as one.
 */

/* <editor-fold desc="MISCELLANEOUS"> */
/* </editor-fold desc="MISCELLANEOUS"> */

/*
 * Ex: header/footer/home/ etc ...
 */
/* <editor-fold desc="COMPONENT NAME"> */
/* <editor-fold desc="FEATURE NAME"> */
/* </editor-fold desc="FEATURE NAME"> */
/* </editor-fold desc="COMPONENT NAME"> */