Create space for bubbles in containers

app/assets/stylesheets/bubble.css

@@ -0,0 +1,53 @@
+@layer components {
+  .bubble {
+    --bubble-color: radial-gradient(oklch(var(--lch-blue-medium) / 10%) 50%, oklch(var(--lch-blue-medium) / 50%) 100%);
+    --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
+    --bubble-rotate: 0deg;
+    --bubble-size-default: 4rem;
+
+    block-size: var(--bubble-size, var(--bubble-size-default));
+    container-type: inline-size;
+    font-size: 1.75rem;
+    font-weight: bold;
+    inline-size: var(--bubble-size, var(--bubble-size-default));
+    padding: 0.5cqi;
+    position: absolute;
+    inset-block-start: 50%;
+
+    &:before {
+      background: var(--bubble-color);
+      border-radius: var(--bubble-shape);
+      content: "";
+      inset: 0;
+      position: absolute;
+      transform: rotate(var(--bubble-rotate));
+    }
+
+    @media (any-hover: hover) {
+      &:hover:before {
+        animation: wobble 1200ms;
+      }
+    }
+
+    svg {
+      display: block;
+      letter-spacing: 0.125ch;
+      text-transform: uppercase;
+    }
+  }
+
+  .bubble__number {
+    display: grid;
+    font-size: 40cqi;
+    font-weight: 900;
+    inset: 0;
+    place-content: center;
+    position: absolute;
+    text-align: center;
+  }
+}
+
+.bubble--closing {
+  inset-inline-start: calc(-1 * var(--bubble-gap));
+  translate: -100% -50%;
+}

app/assets/stylesheets/card-columns.css

@@ -10,10 +10,13 @@
   }
 
   .card-columns {
+    --bubble-size: 4rem;
+    --bubble-gap: 0.5rem;
+
     display: grid;
     grid-template-columns: repeat(2, 50%);
     margin: auto;
-    max-inline-size: 1080px;
+    max-inline-size: calc(100% - (var(--bubble-size) + var(--bubble-gap)) * 2);
     position: relative;
 
     &:before {

app/assets/stylesheets/cards.css

@@ -25,7 +25,6 @@
   }
 
   .card--golden.card--doing {
-    /* --lch-golden: var(--lch-yellow-medium); */
     --lch-golden: 89.1% 0.178 95.7;
 
     background-color: var(--color-canvas);
@@ -290,60 +289,6 @@
     border-block-end: 1px dashed currentcolor;
   }
 
-  .card__bubble {
-    --bubble-color: radial-gradient(oklch(var(--lch-blue-medium) / 10%) 50%, oklch(var(--lch-blue-medium) / 50%) 100%);
-    --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
-    --bubble-rotate: 0deg;
-    --size: 5cqi;
-
-    block-size: var(--size);
-    container-type: inline-size;
-    font-size: 1.75rem;
-    font-weight: bold;
-    inline-size: var(--size);
-    inset: 50% auto auto -0.5ch;
-    padding: 0.5cqi;
-    position: absolute;
-    translate: -100% -50%;
-
-    &:before {
-      background: var(--bubble-color);
-      border-radius: var(--bubble-shape);
-      content: "";
-      inset: 0;
-      position: absolute;
-      transform: rotate(var(--bubble-rotate));
-    }
-
-    @media (any-hover: hover) {
-      &:hover:before {
-        animation: wobble 1200ms;
-      }
-    }
-
-    span {
-      display: grid;
-      font-size: 40cqi;
-      font-weight: 900;
-      inset: 0;
-      place-content: center;
-      position: absolute;
-      text-align: center;
-    }
-
-    svg {
-      display: block;
-      letter-spacing: 0.125ch;
-      text-transform: uppercase;
-    }
-
-    .card:nth-child(2n+1) & { --bubble-rotate: -90deg; }
-    .card:nth-child(3n+1) & { --bubble-rotate: 45deg; }
-  }
-
-  .card__bubble--today {
-    span {
-      font-size: 30cqi;
-    }
-  }
+  .card:nth-child(2n+1) .bubble { --bubble-rotate: -90deg; }
+  .card:nth-child(3n+1) .bubble { --bubble-rotate: 45deg; }
 }

app/views/cards/display/_preview.html.erb

@@ -30,7 +30,7 @@
     <%= render "cards/display/common/background", card: card %>
 
     <% if card.closing_soon? %>
-      <%= render "cards/display/preview/bubble", days: card.days_until_close %>
+      <%= render "cards/display/preview/bubble", days: card.days_until_close, class: "bubble--closing" %>
     <% end %>
   <% end %>
 <% end %>

app/views/cards/display/preview/_bubble.html.erb

@@ -1,4 +1,4 @@
-<div class="card__bubble">
+<div class="bubble <%= local_assigns[:class] || "" %>">
   <svg viewBox="0 0 200 100">
     <path id="top-half" fill="transparent" d="M 20,100 A 80,80 0 0,1 180,100" />
     <text text-anchor="middle" fill="currentColor">
@@ -8,7 +8,7 @@
     </text>
   </svg>
 
-  <span class="circle-bubble__number">
+  <span class="bubble__number">
     <%= days < 1 ? "!" : days %>
   </span>