.overlay {
	position: fixed;
	left: 50%;
	bottom: 0;
	width: 100%;
	max-width: 768px;
	padding-right: var(--padding);
	padding-left: var(--padding);
	padding-top: var(--padding);
	padding-bottom: 0;
	display: flex;
	z-index: 2;
	transform: translateX(-50%) translateY(100%);
	transition: transform 0.6s ease-in-out;
}

.overlay.visible {
	transform: translateX(-50%) translateY(0);
}

.modal {
	width: 100%;
	display: flex;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
	padding-bottom: var(--padding);
	background-color: var(--white);
}

.cookie-banner {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
	border-bottom-right-radius: 24px;
	border-bottom-left-radius: 24px;
	border-top: 1px solid var(--purple);
	border-right: 1px solid var(--purple);
	border-left: 1px solid var(--purple);
	border-bottom: 1px solid var(--purple);
	background-color: var(--white);
	gap: 32px;
}

.cookie-banner-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media screen and (max-width: 768px) {
	.overlay {
		padding: 0;
	}

	.modal {
		border-radius: 0;
		padding: 0;
	}

	.cookie-banner {
		gap: 16px;
		border-bottom: 1px solid var(--white);
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}

	.cookie-banner-content {
		gap: 8px;
	}
}