@layer components {
  .cookie-consent { position: fixed; z-index: 1000; right: var(--space-m); bottom: var(--space-m); width: min(25rem, calc(100% - 2 * var(--space-m))); padding: var(--space-m); background: var(--color-white); box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 18%); }
  .cookie-consent__title { margin: 0; font-family: var(--font-typewriter); font-size: var(--text-card-title); font-weight: 700; }
  .cookie-consent__text { margin: var(--space-s) 0 0; font-size: var(--text-small); }
  .cookie-consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; justify-content: space-between; margin-top: var(--space-s); }
  .cookie-consent__refuse { padding: 0.5rem; border: 0; color: inherit; background: transparent; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
  .cookie-settings { margin-top: var(--space-l); padding: var(--space-m); background: var(--color-light-gray); }
  .cookie-settings > :first-child { margin-top: 0; }
  .cookie-settings > :last-child { margin-bottom: 0; }
}

@media (max-width: 40rem) {
  .cookie-consent { right: var(--page-gutter); bottom: var(--page-gutter); width: calc(100% - 2 * var(--page-gutter)); }
}