.cookie {
  max-inline-size: 50rem;
  display: grid;
  grid-template-columns: 3rem 1fr min-content;
  gap: var(--gap-24) var(--gap-18);
  padding-block: var(--gap-36);
  padding-inline: var(--gap-36);
  margin-inline: auto;
  position: fixed;
  inset-inline: 0;
  inset-block-end: var(--gap-16);
  background-color: var(--white);
  border-radius: var(--radius-12);
  box-shadow: 0 30px 50px hsl(from var(--primary) h s l / 15%);
  z-index: 999;

  & .cookie-btns {
    align-self: center;
    display: flex;
    gap: var(--gap-16);
  }
}

@media screen and (max-width: 960px) {
  .cookie {
    margin-inline: var(--gap-16);
  }
}

@media screen and (max-width: 768px) {
  .cookie {
    grid-template-columns: 3rem 1fr;
    padding-inline: var(--gap-16);

    & p {
      grid-column: 2 / -1;
    }

    & .cookie-btns {
      grid-column: 2;
      justify-self: flex-end;
      flex-wrap: wrap;
    }
  }
}