@media (max-width:768px) {
  .cmplz-cookiebanner {
	.cmplz-buttons {
	  flex-direction: column;
	}
	width: 100%;
  }
}

@media (max-width:1023px) {
  .cmplz-cookiebanner {
	max-width: 100%;
  }
}
@media (max-width: 1023px ) {
  .cmplz-cookiebanner {
	transform: translateX(-50%);
	bottom: 0;
	top: initial;
  }
}

@media (min-width: 1024px ) {
  .cmplz-cookiebanner {
	&.cmplz-categories-type-save-preferences .cmplz-body{
	  & > div{
		width: 49%;
	  }
	}
	&.cmplz-categories-visible .cmplz-body{
	  & > div{
		width: 49%;
	  }
	}
	.cmplz-body{
	  grid-column: span 2;
	  display: flex;
	  gap: 10px;
	}
	margin: 10px;
	width: calc(100% - 20px);
	grid-column-gap:10px;
	// With auto the Text element will fill space of Categories and Buttons if they are not there
	display: grid;
	grid-template-columns: 1fr 1fr;
	bottom: 0;
	left: initial;
	top:initial;
	transform: initial;

	.cmplz-message, .cmplz-categories, .cmplz-links, .cmplz-buttons {
	  grid-column: inherit;
	}

	.cmplz-description {
	  grid-column-start: 1;
	}

	//extra class to be able to override categories height from css generation
	&.optin, &.optout {
	  .cmplz-categories {
		width: 85vw;
		grid-column-start: 2;
	  }
	}
	.cmplz-buttons {
	  grid-column-start: 3;
	  grid-row-start: 3;
	  display: flex;
	  flex-direction: column;
	  .cmplz-btn {
		min-width: 250px;
		width: 100%;
	  }
	}
	.cmplz-links.cmplz-documents {
	  grid-column-end: 3;
	}

	.cmplz-links.cmplz-information {
	  grid-column-start: 3;
	  grid-column-end: 4;
	  grid-row-start: 5;
	  display: flex;
	  justify-content: flex-end;
	}

	.cmplz-links.cmplz-documents {
	  grid-column-start: 1;
	  grid-row-start: 5;

	  display: flex;
	  justify-content: flex-start;
	}

	.cmplz-categories.cmplz-tcf {
	  height: 160px;
	}

	&.cmplz-categories-type-view-preferences, &.cmplz-categories-type-no {
	  .cmplz-buttons {
		flex-direction: initial;
	  }

	  &.cmplz-categories-visible {
		.cmplz-buttons {
		  flex-direction: column;
		}
	  }
	}
  }
}