.wrapper {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: var(--z-index-cookie-consent);
  display: grid;
  grid-auto-flow: row;
  gap: var(--spacing-4);
  width: auto;
  padding: var(--spacing-4);
  background-color: var(--pane-background);
  border: 1px solid var(--pane-border);
  border-radius: var(--border-radius-lg);
  box-shadow: 0px 4px 20px 0px var(--color-black-alpha-100);
}

.content {
  display: grid;
  grid-auto-flow: row;
  gap: var(--spacing-2);
}

.title {
  font-family: var(--message-font);
  font-size: var(--font-size-5);
  line-height: 120%;
  color: var(--global-foreground);
}

.description {
  font-family: var(--main-font);
  font-size: var(--font-size-3);
  line-height: 160%;
  color: var(--global-foreground);
}

.link {
  font-family: var(--main-font);
  font-size: var(--font-size-3);
  line-height: 160%;
  color: var(--primary-color);
}

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}

.button {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-3);
}

@media screen and (min-width: 768px) {
  .wrapper {
    gap: var(--spacing-6);
    width: 730px;
    padding: var(--spacing-6);
  }

  .content {
    gap: var(--spacing-3);
  }

  .title {
    font-size: var(--font-size-10);
  }

  .description {
    font-size: var(--font-size-5);
  }

  .link {
    font-size: var(--font-size-5);
  }

  .controls {
    gap: var(--spacing-6);
  }

  .button {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-4);
  }
}