Readapt the misuse of BEM, Code organization

- -- is only for a modifier, not a child "child". Use master__child without the parent__ in it to make it more readable.
https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
- Redefine atom design components

src/molecules/Photo.svelte

@@ -33,7 +33,7 @@
 	onMount(() => {
         // Parallax on photo when the image has been loaded
         const parallaxNumber = basicScroll.default.create({
-            elem: photoElement.querySelector('.photo__image--number'),
+            elem: photoElement.querySelector('.photo__number'),
             direct: photoElement,
             from: 'top-bottom',
             to: 'bottom-top',
@@ -64,7 +64,7 @@
     <div class="photo__image wrap">
         <div class="align">
             <a href={photoHref}>
-                <picture class="photo__image--img">
+                <picture class="photo__picture">
                     {#if layout === 'list'}
                     <source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
                     <source media="(min-width: 768px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
@@ -86,10 +86,10 @@
                     {/if}
                 </picture>
             </a>
-            <time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
+            <time class="photo__date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
                 {dayjs(photo.date).format('MMM Do, YYYY')}
             </time>
-            <span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
+            <span class="photo__number">{(index < 10 ? '0': '') + index}</span>
         </div>
     </div>
 </div>