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/routes/credits.svelte

@@ -48,7 +48,7 @@
 
         <div class="page__list">
             {#each credits as category}
-            <div class="page__list--category">
+            <div class="page__category">
                 <h2 class="title-category">{category.name}</h2>
                 {#each category.credits as person}
                 <dl>

src/routes/location/[country]/[location].svelte

@@ -129,7 +129,7 @@
 		</a>
 	</div>
 
-	<div class="place__description--wrap wrap">
+	<div class="place__wrap wrap">
 		<div class="place__description">
 			<div class="wrapper">
 				<p>{$site.description}</p>
@@ -158,9 +158,10 @@
 </section>
 
 <section class="photos photos--{layoutSetting || 'list'}">
-	<div class="photos__side--wrap wrap">
+	<div class="photos__sidewrap wrap">
 		<aside class="photos__side">
 			<Switcher type="switcher--side" />
+
 			<p class="updated style-caps">
 				<strong>Updated</strong>
 				<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
@@ -186,8 +187,8 @@
 			on:mouseenter={() => pageTranslate = pageTranslate - ((100 / pagesTotal) * 0.666)}
 			on:mouseleave={() => pageTranslate = pageTranslate + ((100 / pagesTotal) * 0.666)}
 		>
-			<div class="pagination__page--info">page</div>
-			<div class="pagination__page--numbers">
+			<div class="pagination__info">page</div>
+			<div class="pagination__numbers">
 				<div class="scroll" style="transform: translateY(-{pageTranslate}%);">
 					{#each pages as page}
 					<span>{page}</span>