Update images, enhance Drinks section, and adjust styles:

- **Image updates**: Replaced placeholder images with new gallery images (`Gallery1.png` to `Gallery8.png`) and added whiskey images (`Whiskey1.png` to `Whiskey3.png`).
- **Drinks section**: Added description, updated drink types, and included new images for Whiskey options and Monthly Special.
- **Circular design refinements**: Enlarged circle dimensions, ensured image fit with `object-fit: cover`, and added responsive adjustments.
- **Style improvements**: Introduced overflow handling, z-index management, and tailored sizes for Whiskey circles.

src/styles/components/Drinks.css

@@ -81,8 +81,8 @@
 }
 
 .circle {
-  height: 9em;
-  width: 9em;
+  height: 12em;
+  width: 12em;
   border: 2px solid var(--color-accent-beige);
   border-radius: 50%;
   margin: 0.5rem;
@@ -94,6 +94,7 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .circle:hover {
@@ -109,12 +110,30 @@
   text-align: center;
   transition: opacity var(--transition-standard);
   position: absolute;
+  z-index: 2;
 }
 
 .circle:hover .circle-label {
   opacity: 1;
 }
 
+.circle-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.whiskey-circle {
+  height: 20em;
+  width: 20em;
+}
+
 .circle-row {
   display: flex;
   justify-content: center;
@@ -153,6 +172,11 @@
     height: 5em;
     width: 5em;
   }
+  
+  .whiskey-circle {
+    height: 7em;
+    width: 7em;
+  }
 
   .circle-label {
     font-size: 0.7rem;
@@ -188,6 +212,11 @@
   .circle {
     margin: 1rem 0;
   }
+  
+  .whiskey-circle {
+    height: 6em;
+    width: 6em;
+  }
 
   .mate-vodka {
     padding: 0.8rem;