.wedding-countdown { position: relative; isolation: isolate; margin: 0 auto; padding: 95px 48px 32px; width: min(900px, calc(100% - 32px)); text-align: center; background: radial-gradient(ellipse at 50% 75%, #fffaf6 20%, #fff3f3 70%); border-radius: 46% 46% 20px 20px / 70px 70px 20px 20px; box-shadow: 0 16px 50px #7f40500a; }
.countdown-florals { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wedding-countdown h2 { margin: 6px 0 10px; color: var(--wine); font-family: 'Great Vibes', cursive; font-weight: 400; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.2; }
.wedding-countdown p { margin: 8px 0; }
.wedding-countdown .eyebrow { color: var(--wine); font-size: .7rem; letter-spacing: .22em; }
.wedding-countdown > p:not(.eyebrow):not(.countdown-signature) { font-size: .85rem; }
.countdown-units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 650px; margin: 20px auto 8px; }
.countdown-units > div { position: relative; aspect-ratio: 160 / 145; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 18%; }
.countdown-units svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; filter: drop-shadow(0 5px 5px #7f40500c); }
.countdown-units strong { display: block; color: var(--wine); font-family: Lora, Georgia, serif; font-size: clamp(1.6rem, 4.5vw, 2.9rem); line-height: 1.15; font-weight: 400; font-variant-numeric: tabular-nums; }
.countdown-units span { display: block; margin-top: 4px; font-size: .65rem; text-transform: uppercase; letter-spacing: .13em; color: #754453; }
.wedding-countdown .countdown-signature { font-family: 'Great Vibes', cursive; font-size: 1.9rem; color: var(--wine); margin: 6px 0 0; }
.countdown-signature span { font-family: Georgia, serif; font-size: 1rem; margin: 0 12px; color: #b17c85; }
#countdown-message:empty { display: none; }
@media(max-width: 600px) { .wedding-countdown { padding: 68px 22px 26px; } .countdown-florals { height: auto; } .countdown-units { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; max-width: 300px; } .countdown-units strong { font-size: 2.35rem; } .wedding-countdown .eyebrow { font-size: .6rem; letter-spacing: .15em; } }

/* Anchor the text to each heart, independent of the grid width. */
.countdown-units > div { padding: 0; container-type: inline-size; }
.countdown-units strong { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 76%; text-align: center; font-size: 28cqw; line-height: 1; }
.countdown-units span { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); width: 76%; margin: 0; text-align: center; font-size: 7cqw; line-height: 1; letter-spacing: .1em; }