.cookie-banner {
  position: fixed;
  inset-block-end: var(--spacing-base-space-200);
  inset-inline: var(--spacing-base-space-200);
  background: rgb(33 50 67 / 90%);
  color: var(--color-white);
  z-index: 999999;
  border-radius: var(--radius-radius-120);
  padding-inline: var(--spacing-base-space-500);
  max-width: var(--header-max-width);
  margin-inline: auto;
}

.cookie-banner a,
.cookie-banner button {
  color: var(--color-primary-light-teal);
}

.cookie-banner > .cluster {
  flex-wrap: nowrap;
  padding-block: 0.625rem;
}

.cookie-banner > .cluster > :nth-child(2) {
  flex: 1;
  min-width: 0;
  font-weight: var(--typography-weight-semi-bold);
}

.cookie-banner svg [stroke] {
  stroke: currentcolor;
}

.cookie-banner svg [fill] {
  fill: currentcolor;
}

@media (width <= 900px) {
  .cookie-banner {
    padding-inline: var(--spacing-base-space-300);
    padding-block: var(--spacing-base-space-200);
  }

  .cookie-banner > .cluster {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'icon  .    close'
      'text  text text';
    align-items: start;
    gap: var(--spacing-base-space-0) var(--spacing-base-space-100);
  }

  .cookie-banner > .cluster > :nth-child(1) {
    grid-area: icon;
  }

  .cookie-banner > .cluster > :nth-child(2) {
    grid-area: text;
  }

  .cookie-banner > .cluster > .alert-close {
    grid-area: close;
    margin-inline-start: 0;
    place-self: start end;
  }
}