fix: clean up some CSS

src/components/helpers/carousel/Carousel.jsx

@@ -47,14 +47,13 @@ export default function EmblaCarousel({ data }) {
   }, [emblaApi, onSelect]);
 
   return (
-    <div className="embla">
-      <div className="embla__viewport" ref={emblaRef}>
-        <div className="embla__container">
+    <div className="carousel">
+      <div className="carousel_viewport" ref={emblaRef}>
+        <div className="carousel_container">
           {data.map((photo, index) => (
-            <div className="embla__slide" key={index}>
-              <div className="embla__slide__inner">
+            <div className="carousel_slide" key={index}>
+              <div className="carousel_slide__inner">
                 <img
-                  className="embla__slide__img"
                   src={photo.url.default}
                   alt="Marketplace example screenshot"
                 />
@@ -64,7 +63,7 @@ export default function EmblaCarousel({ data }) {
         </div>
       </div>
       <button
-        className="embla__button embla__button--prev"
+        className="carousel_button prev"
         onClick={() => scroll('prev')}
         disabled={!prevBtnEnabled}
         title="Previous"
@@ -72,7 +71,7 @@ export default function EmblaCarousel({ data }) {
         <MdOutlineArrowBackIos />
       </button>
       <button
-        className="embla__button embla__button--next"
+        className="carousel_button next"
         onClick={() => scroll('next')}
         disabled={!nextBtnEnabled}
         title="Next"

src/components/helpers/carousel/carousel.scss

@@ -1,24 +1,22 @@
-.embla {
+.carousel {
   position: relative;
   width: 350px;
   margin-left: 5px;
 }
 
-.embla__viewport {
+.carousel_viewport {
   overflow: hidden;
   width: 100%;
+  &.is-draggable {
+    cursor: move;
+    cursor: grab;
+  }
+  &.is-dragging {
+    cursor: grabbing;
+  }
 }
 
-.embla__viewport.is-draggable {
-  cursor: move;
-  cursor: grab;
-}
-
-.embla__viewport.is-dragging {
-  cursor: grabbing;
-}
-
-.embla__container {
+.carousel_container {
   display: flex;
   user-select: none;
   -webkit-touch-callout: none;
@@ -27,31 +25,31 @@
   margin-left: -10px;
 }
 
-.embla__slide {
+.carousel_slide {
   position: relative;
   min-width: 100%;
   padding-left: 10px;
+  img {
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 50%;
+    width: auto;
+    min-height: 100%;
+    min-width: 100%;
+    max-width: none;
+    transform: translate(-50%, -50%);
+  }
 }
 
-.embla__slide__inner {
+.carousel_slide__inner {
   position: relative;
   overflow: hidden;
   height: 190px;
 }
 
-.embla__slide__img {
-  position: absolute;
-  display: block;
-  top: 50%;
-  left: 50%;
-  width: auto;
-  min-height: 100%;
-  min-width: 100%;
-  max-width: none;
-  transform: translate(-50%, -50%);
-}
 
-.embla__button {
+.carousel_button {
   outline: 0;
   cursor: pointer;
   touch-action: manipulation;
@@ -67,22 +65,14 @@
   justify-content: center;
   align-items: center;
   padding: 0;
-}
-
-.embla__button:disabled {
-  cursor: default;
-  opacity: 0.3;
-}
-
-.embla__button__svg {
-  width: 100%;
-  height: 100%;
-}
-
-.embla__button--prev {
-  left: 27px;
-}
-
-.embla__button--next {
-  right: 27px;
-}
+  &:disabled {
+    cursor: default;
+    opacity: 0.3;
+  }
+  &.prev {
+    left: 27px;
+  }
+  &.next {
+    right: 27px;
+  }
+}