.cookies {
  box-sizing: border-box;
  position: fixed;
  inset: auto 2rem 2rem;
  padding: 2rem;
  width: calc(100% - 4rem);
  max-width: 1140px;
  max-height: calc(100% - 4rem);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--pale-grey);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-large);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 2rem;
  grid-row-gap: 1rem;
  overflow: auto;
  transition: .3s;
  z-index: 1002;
}

@media screen and (max-width: 768px) {
  .cookies {
    grid-template-columns: 1fr;
  }
}

.cookies__remove {
  transform: translateY(5rem);
  opacity: 0;
}

.cookies > h4,
.cookies > p {
  margin: unset;
}

.cookies > h4 {
  grid-column: 1 / 3;
}

@media screen and (max-width: 768px) {
  .cookies > h4 {
    grid-column: 1 / 2;
  }
}

.cookies__buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: .75rem;
  width: max-content;
  height: max-content;
  margin-top: auto;
  margin-left: auto;
}

@media screen and (max-width: 768px) {
  .cookies__buttons {
    margin-top: 1rem;
  }
}

.cookies__button {
  padding: .5rem 1.5rem;
  min-height: var(--button-height);
  border-radius: calc(var(--button-height) / 2);
  border: 1px solid;
  transition: .3s;
}

.cookies__button--cancel {
  background-color: transparent;
  border-color: var(--gray);
  color: var(--gray);
}

.cookies__button--cancel:hover {
  background-color: var(--gray);
  color: var(--white);
}

.cookies__button--accept {
  background-color: var(--color2);
  border-color: var(--color2);
  color: var(--white);
}

.cookies__button--accept:hover {
  background-color: var(--gray);
  border-color: var(--gray);
}