1 files changed, 18 insertions, 18 deletions

diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css
index 8eadb06..28dda6a 100644
--- a/stylesheets/concerts.css
+++ b/stylesheets/concerts.css
@@ -28,11 +28,11 @@ main h1 {
     grid-gap: 0.8em;
 }
 
-.eventcontainer {
+.event {
     position: relative;
 }
 
-a.event {
+a.thumbnail {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -41,14 +41,14 @@ a.event {
     text-decoration: none;
 }
 
-.event img {
+.thumbnail img {
     object-position: center;
     object-fit: cover;
     height: 100%;
     width: 100%;
 }
 
-.event .summary {
+.thumbnail .summary {
     position: absolute;
     font-weight: bold;
     color: white;
@@ -64,7 +64,7 @@ a.event {
     font-size: small;
 }
 
-.eventcontainer.canceled {
+.event.canceled {
     opacity: 50%;
     transition: 0.5s;
 }
@@ -72,8 +72,8 @@ a.event {
     display: block;
     color: red;
 }
-.eventcontainer.canceled:hover,
-.eventcontainer.canceled.active {
+.event.canceled:hover,
+.event.canceled.active {
     opacity: 1;
 }
 
@@ -132,12 +132,12 @@ a.event {
         padding-right: 1em;
     }
 
-    .event .summary {
+    .thumbnail .summary {
         opacity: 0;
         transition: 0.5s;
     }
 
-    .event img {
+    .thumbnail img {
         transition: 0.5s;
     }
 
@@ -149,15 +149,15 @@ a.event {
         border-top-left-radius: 0.5em;
     }
 
-    .eventcontainer:hover img,
-    .eventcontainer:focus-within img,
-    .eventcontainer.active img {
+    .event:hover img,
+    .event:focus-within img,
+    .event.active img {
         filter: grayscale(0.8) brightness(0.4);
     }
 
-    .eventcontainer:hover .summary,
-    .eventcontainer:focus-within .summary,
-    .eventcontainer.active .summary {
+    .event:hover .summary,
+    .event:focus-within .summary,
+    .event.active .summary {
         opacity: 1;
     }
 
@@ -182,11 +182,11 @@ a.event {
         --cell-height: 8em;
     }
 
-    .eventcontainer {
+    .event {
         display: grid;
     }
 
-    .event .summary {
+    .thumbnail .summary {
         align-self: flex-end;
 
         display: flex;
@@ -196,7 +196,7 @@ a.event {
         margin: 0;
         background: #0008;
     }
-    .eventcontainer.active > a.event .summary {
+    .event.active > a.thumbnail .summary {
         align-self: stretch;
         /* No idea why "100%" does not work here: */
         height: var(--cell-height);