improve class naming

app/components/events.hbs

@@ -2,20 +2,20 @@
   <h2 data-test-events-section-header class='events-section__heading'>You can
     check out all our events below!!</h2>
   {{#each-in this.EVENTS_CATEGORIES as |category events|}}
-    <div class='events__category'>
+    <div class='events-section__category'>
       <h3
         data-test-events-category={{category}}
-        class='events__category-heading'
+        class='events-section__category-heading'
       >{{category}}:</h3>
-      <div class='events__links-container'>
+      <div class='events-section__links-container'>
         {{#each events as |event index|}}
           {{#if (not-eq index 0)}}
             <span>|</span>
           {{/if}}
           <a
             data-test-events-link={{event.name}}
             href={{event.link}}
-            class='events__link'
+            class='events-section__link'
           >{{event.name}}</a>
         {{/each}}
       </div>

app/styles/events.module.css

@@ -13,20 +13,20 @@
   color: var(--color-black);
 }
 
-.events__category-heading {
+.events-section__category-heading {
   font-size: 1.1rem;
   text-align: center;
   color: var(--color-black);
 }
 
-.events__links-container {
+.events-section__links-container {
   margin-top: 1.25rem;
   display: flex;
   justify-content: center;
   flex-flow: row wrap;
 }
 
-.events__links-container > * {
+.events-section__links-container > * {
   margin: 0 0.625rem;
   padding: 0.5rem;
   text-align: center;
@@ -35,13 +35,13 @@
   text-decoration: none;
 }
 
-.events__link:hover {
+.events-section__link:hover {
   background: var(--color-soft-magenta);
   border-radius: 1.25rem;
 }
 
 @media (max-width: 425px) {
-  .events__links-container > * {
+  .events-section__links-container > * {
     width: 100%;
   }
 }